jQuery驗證表單，突出顯示無效輸入

Question

我創建此表單是為了獲取廣告系列名稱，開始/結束日期以及要選擇的單選按鈕。

<form:form id="submitCreateCampaignForm" action="createCampaign02" method="post" commandName="campaignModel">
    <table border="0">
        <tr>
            <td style="width: 140px;" >Campaign Name:</td>
            <td style="width: 300px;" colspan="4"><form:input path="campaignName" style="width:84%" /></td>
        </tr>
        <tr>
            <td>Campaign Duration:</td>
            <td colspan="1"><form:input type="text" path="fromDate" class="date-picker" /></td>
            <td colspan="1"><form:input type="text" path="toDate" class="date-picker" /></td>
            <td style="width: 250px"></td>
            <td style="width:250px"></td>
         </tr>
         <tr>
             <td>Campaign Type:</td>
             <td colspan="2"><form:radiobuttons path="campaignType" items="${campaignTypeList}" /></td>
             <td>
                 <button class="yellowButton"id="submitCreateCampaignButton">NEXT: CHARACTERISTICS</button>
             </td>
        </tr>
    </table>
</form:form>

我想確保插入名稱（不進行任何長度檢查），以dd/mm/yyyy格式正確選擇日期，並選擇一個單選按鈕。 如果存在任何錯誤，我希望它的框為紅色邊框。

用戶單擊提交按鈕后，我想檢查這些內容。

$(document).ready(function() {
    $("#submitCreateCampaignButton").click( function(){
        $( "#submitCreateCampaignForm" ).submit();
    });
});

為了檢查上述所有要求，我嘗試了不同類型的驗證器，但尚未成功。

誰能提出一個好的解決方案？

Answer 1

您可以使用jQuery和輸入[name = campaignName]之類的選擇器來獲取各種輸入

請參閱下面的示例和小提琴。

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      alert("nono, campaignType empty");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      alert("nono, fromDate empty");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      alert("nono, fromDate "+fromDate+" not a valid date");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy

function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

https://jsfiddle.net/ukfw3xo9/15/

這僅測試兩個字段是否為非空（有效日期），但是您可以使用簡單的js測試任何內容

測試前的!errors &&只是警告第一個錯誤，而不是一次顯示所有錯誤（表示“如果尚未報告錯誤，則...”）。

UPDATE

設置紅色字段：

https://jsfiddle.net/ukfw3xo9/16/

CSS：

.red {background-color:red;}

或（僅邊界）

.red {border:1px solid red;}

JAVASCRIPT：

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;

        $form.find("input").removeClass("red");
    var campaignName=$form.find("input[name=campaignName]").val()

    if (!errors && campaignName == "") {
      $form.find("input[name=campaignName]").addClass("red");
      errors++;
    }

    var fromDate=$form.find("input[name=fromDate]").val()

    if (!errors && fromDate == "" ) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }
    if (!errors && !isValidDate(fromDate)) {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }

    // ...

    if (errors) e.preventDefault();
  });
});

// http://stackoverflow.com/questions/14636536/how-to-check-if-a-variable-is-an-integer-in-javascript/14794066#14794066

function isInt(value) {
  if (isNaN(value)) return false;
  var f=parseFloat(value);
  return f==(f|0);
}

// http://stackoverflow.com/questions/276479/javascript-how-to-validate-dates-in-format-mm-dd-yyyy
function isValidDate(date) {
    var matches = /^(\d{2})[-\/](\d{2})[-\/](\d{4})$/.exec(date);
    if (matches == null) return false;
    var d = matches[2];
    var m = matches[1] - 1;
    var y = matches[3];

    if(y>2100 || y<1900) return false; // accept only recent & not too far years

    var composedDate = new Date(y, m, d);
    return composedDate.getDate() == d &&
            composedDate.getMonth() == m &&
            composedDate.getFullYear() == y;
}

現在，您可以刪除所有“！errors &&”（不僅第一個單元格，所有單元格都將變為紅色）。

這段代碼有點丑陋，只是為了展示這個概念，一種更干凈的方法是只獲取一次輸入：

var $fromDateInput=$form.find("input[name=fromDate]");
var fromDateValue=$fromDateInput.val();

if (fromDateValue == "" ) {
    $fromDateInput.addClass("red");
    errors++;
}

Answer 2

您可以設置一個名為“ required”的標簽，並設置字段的嚴格類型，例如當該字段是電子郵件時，鍵入“ email”。 如果類型為“文本”，則瀏覽器將僅檢查輸入是否已填充。

為什么將輸入的名稱設置為“ form：input”，而不僅僅是“ input”？

以及帶有所需標簽的輸入示例

<form>
    <input type='text' name='test' required />
    <input type='email' name='email' required /> <!-- will check if is an email -->
    <input type='number' name='telephone' required /> <!-- will check if is an number -->
    <input type='submit'/>
</form>

閱讀有關html5字段的更多信息，並且您僅在某些情況下需要jquery驗證。

請記住，由於前面存在某種類型的黑客攻擊，因此您需要在服務器上重新進行驗證。