循環顯示錶單元素並驗證每個字段的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>