フォーム要素をループし、各フィールドを検証する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>