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验证只针对某些情况下。

请记住，由于某种类型的黑客攻击，您需要在服务器上重新验证。