循环通过表单元素并验证每个字段JQuery / Javascript？

Question

我正在尝试为每个字段创建动态表单验证。表单上的每个元素都在单独的div中扭曲。表单上的任何必填字段都必须包含“＆＃39; required＆＃39;在标签元素上设置。以下是我的表格示例：

＆＃13;

＆＃13;

$('.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];
                
               	if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                    $(this).val('');
                }
            } 
	    });
	});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是我到目前为止所尝试的：

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

我正在测试循环是否会捕获所有元素的类＆＃39; required＆＃39;以及输入字段是否为所需元素为空。我想知道这是否是循环元素的最佳选择？另外，我想在每个字段下面或下面设置消息。如果用户尝试提交表单但必填字段为空，则屏幕上应显示如下消息：此字段为必填项。＆＃39;。如果有人有任何建议或例子，请告诉我。谢谢。

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];
     	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>