循环显示表单元素并验证每个字段的JQuery/Javascript？

Question

我试图为每个字段创建动态表单验证。表单上的每个元素都在单独的div中进行了扭曲。表单上的任何必填字段都在标签元素上设置了“必需”类。这里是例如我的形式：

$('.datepick').each(function(){ 
 
\t  $(this).attr('readonly', true).css("background-color", "#DCDCDC").datepicker({ 
 
\t  \t format: "mm/dd/yyyy", 
 
\t  \t changeMonth: true, 
 
      changeYear: true, 
 
      showOn: 'focus', 
 
      showButtonPanel: true, 
 
      closeText: 'Clear', 
 
      onClose: function(){ 
 
       var event = arguments.callee.caller.caller.arguments[0]; 
 
       
 
       \t if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { 
 
        $(this).val(''); 
 
       } 
 
      } 
 
\t  }); 
 
\t });

.required:before { 
 
    content: '*'; 
 
    color: red; 
 
    margin-right: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="myForm" id="myForm" method="POST" action="#"> 
 
    \t <fieldset> 
 
    \t \t <legend>Info</legend> 
 
    \t \t \t <div class="formItem"> 
 
    \t \t \t \t <label for="last_name" class="required">Last Name:</label> 
 
    \t \t \t \t <input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." /> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="formItem"> 
 
    \t \t \t \t <label for="first_name" class="required">First Name:</label> 
 
    \t \t \t \t <input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." /> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="formItem"> 
 
    \t \t \t \t <label for="dob" class="required">DOB:</label> 
 
    \t \t \t \t <input type="text" name="frmst_dob" id="frmst_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" class="datepick" /> 
 
    \t \t \t </div> 
 
       <div class="formItem"> 
 
    \t \t \t \t <label for="sport" class="required">Sport:</label> 
 
    \t \t \t \t <select name="frmst_sport" id="frmst_sport"> 
 
    \t \t \t \t \t <option value="">--Choose Sport--</option> 
 
    \t \t \t \t \t <cfoutput query="getSports"> 
 
    \t \t \t \t \t \t <option value="#d_dist#">#d_sname#</option> 
 
    \t \t \t \t \t </cfoutput> 
 
    \t \t \t \t </select> 
 
    \t   </div> 
 
       <div class="formItem"> 
 
    \t \t \t  <p align="center"><input type="button" name="frmSubmit" id="frmstSubmit" value="Submit"></p> 
 
    \t \t  </div> 
 
    \t </fieldset> 
 
    </form>

这是我试过到目前为止：

function frmValidation(frmID){ 
    $('#'+frmID+' label').each(function(){ 
     if($(this).hasClass('required') && $(this).next('input').val() == ''){ 
      console.log($(this).attr('for')); 
     } 
    }); 
} 

我是测试如果循环会赶上带班“必要”的所有元素以及输入字段对于所需元素为空。我想知道这是否是循环元素的最佳选择？另外，我想在每个字段的下一个或下一个字段中设置消息。如果用户尝试提交表单，但必填字段为空，则应在屏幕上显示如下内容：'此字段是必需的'。如果有人有任何建议或例子，请让我知道。谢谢。

Answer 1

您不需要任何JavaScript来验证必填字段。只需将required属性添加到所需的表单元素即可。

您还必须将您的“提交”按钮更改为实际的type="submit"按钮，以便它将触发验证。你目前的“按钮”就是这样，一个常规的按钮，点击时没有特别的事情。

另外，请记住，任何类型的客户端验证都很容易绕过想要绕过它的人，因此，您应该在表单提交后始终在服务器上重新验证。

$('.datepick').each(function(){ 
 
    $(this).attr('readonly', true).css("background-color", "#DCDCDC").datepicker({ 
 
    format: "mm/dd/yyyy", 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    showOn: 'focus', 
 
    showButtonPanel: true, 
 
    closeText: 'Clear', 
 
    onClose: function(){ 
 
     var event = arguments.callee.caller.caller.arguments[0]; 
 
     \t if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { 
 
     $(this).val(''); 
 
     } 
 
    } 
 
}); 
 
}); 
 

 
// Submit event handler 
 
$("#myForm").on("submit", function(evt){ 
 
    console.log("This code is only reached when all fields are valid."); 
 

 
    evt.preventDefault(); // Cancel the event 
 
    evt.stopPropagation(); // Prevent event bubbling 
 
    
 
    // Perform your AJAX call here 
 
});

.required:before { 
 
    content: '*'; 
 
    color: red; 
 
    margin-right: 5px; 
 
} 
 

 
input[type="text"], select, .datepick { 
 
    box-sizing:border-box; 
 
    width:10em; 
 
} 
 

 
.submit { 
 
    text-align:center; 
 
    margin:1em; 
 
} 
 

 
label { 
 
    display:inline-block; 
 
    width:100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<form name="myForm" id="myForm" method="POST" action="#"> 
 
    <fieldset> 
 
    <legend>Info</legend> 
 
    <div class="formItem"> 
 
     <label for="last_name">Last Name:</label> 
 
     <input type="text" name="frmst_lname" id="frmst_lname" required 
 
      maxlength="30" title="Maximum length 30 characters."> 
 
    </div> 
 
    <div class="formItem"> 
 
     <label for="first_name">First Name:</label> 
 
     <input type="text" name="frmst_fname" id="frmst_fname" required maxlength="30" 
 
      title="Maximum length 30 characters."> 
 
    </div> 
 
    <div class="formItem"> 
 
     <label for="dob">DOB:</label> 
 
     <input type="text" name="frmst_dob" id="frmst_dob" required size="10" maxlength="10" 
 
      placeholder="MM/DD/YYYY" class="datepick"> 
 
    </div> 
 
    <div class="formItem"> 
 
     <label for="sport">Sport:</label> 
 
     <select name="frmst_sport" id="frmst_sport" required> 
 
     <option value="">--Choose Sport--</option> 
 
     <cfoutput query="getSports"> 
 
      <option value="#d_dist#">#d_sname#</option> 
 
     </cfoutput> 
 
     </select> 
 
    </div> 
 
    <div class="submit"> 
 
     <input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit"> 
 
    </div> 
 
    </fieldset> 
 
</form>