どのように私は下のフィールドにバリデーションを置くことができます

Question

1. 私は以下のフィールドPLeaseヘルプの検証を適用しようとしています。空であるかどうかをチェックし、空でフィールドにエラーが表示されているかどうかのような通常の検証。どうやってやるの ？

   私のHTMLコード

   フォーム名

   <div class="modal fade bs-example-modal-sm" tabindex="-1" 
           role="dialog" aria-labelledby="mySmallModalLabel" 
           data-keyboard="false" data-backdrop="static"> 
           <div class="modal-dialog modal-sm" role="document"> 
            <div class="modal-content" style="padding:20px;"> 
              <form id="contact-form" method="post" action="" role="form"> 
             <div class="form-group"> 
              <label for="frmName">Form Name *</label> 
                <input id="frmName" type="text" 
                  name="frmName" 
                  class="form-control input-lg" 
                  placeholder="Please enter your form name *" 
                  required="required" 
                  data-error="form name is required." 
                  ></input> 
             <div class="help-block with-errors"></div> 
             </div> 
                <div class="form-group"> 
              <label for="txtProductName" class="control-label">Select Product : </label> 
              <select required="required" data-error="form name is required." style="width: 260px;height :35px; font-size: 15px;" class="form-control" id="op1"> 
               <option selected="selected">Select</option> 
              </select> 
              <div class="help-block with-errors"></div> 
              </div> 
                <div class="form-group"> 
              <label for="frmdesc">Form Description *</label> 
   
                <input id="frmdesc" type="text" name="name" 
                  class="form-control" 
                  placeholder="Please enter your form Desc *" 
                  required="required" 
                  data-error="full name is required."></input> 
             <div class="help-block with-errors"></div> 
             </div> 
   
             <div class="modal-footer"> 
              <button type="button" class="js-save-form fb-button" onclick="checkValidation();" 
                data-dismiss="modal">Proceed</button> 
             </div> 
               </form> 
            </div> 
           </div> 
          </div> 
   

Answer 1

・ホープ便利この意志。

のjQuery：

function checkValidation() 
{ 
    $('.required-fields').each(function(i, obj) { 
     if($(this).val() == "") 
     { 
      $(this).addClass('.alertClass'); 
     } 
     else 
     { 
      $(this).removeClass('.alertClass'); 
     } 
    }); 
} 

CSS：

.alertClass{border-color: indianred;} 

Answer 2

それを試してみて、それを確認してください。

//Check your Jquery and jquery.validate.min.js 

//add script 
     <script> 
     $(document).ready(function() { 
      $("#contact-form").validate(); 
     }); 
function validon() { 
$("#contact-form").valid() 
//or if ($("#contact-form").valid()) {}else{} 
} 
     </script> 


    //html 
      <form id="contact-form" method="post" action="" role="form"> 
      <input type="text" id="txtTest" name="Test" required /> 
      <input type="button" id="btnvalid" value="valid" onclick="validon();" /> 
      </form>