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到達各種輸入，使用選擇器等輸入[名稱= 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; 
} 

您現在可以卸下所有的（所有的細胞都會變成紅色不僅是第一個） 「的錯誤& &！」。

此代碼是醜了一點，只是爲了顯示這個概念，一個更清潔的方式是讓輸入一次：

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領域，和u需要JQuery驗證只針對某些情況下。

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