我怎樣才能把驗證下面的字段

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>