Jquery : 폼 유효성 검사가 작동하지 않습니다.

Question

저는 Jquery에 매우 익숙하며 여러분이이 jquery 유효성 검사 문제로 저를 도울 수 있기를 바랍니다.

양식의 유효성 검사를 시도했지만 전혀 유효성을 검사하지 않았습니다. 내가 설정 한 제한에 관계없이 필드에 입력 한 모든 내용을 허용합니다.

도와주세요. 고맙습니다. 당신은 id="form" 2 개 요소가

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 

    <script type="text/javascript"> 
    $(function(){ 
    $('#form').validate({ 
    alert("bbbb"); 
    rules: { 
     name: { 
      required: true, 
      minlength: 2, 
      maxlength: 20, 
      lettersonly: true 
     }, 
     ssn: { 
      required: true, 
      minlength: 9, 
      maxlength: 9, 
      nowhitespace: true 
     }, 
     gender: { 
      required: true 
     }, 
     mobile: { 
      required: true, 
      minlength: 10, 
      maxlength: 13, 
      digits: true 
     }, 
     address: { 
      required: true, 
      minlength: 10, 
     }, 
     email: { 
      required: true, 
      minlength: 6, 
      email: true 
     } 
    }, 
    messages: { 
     name: { 
      required: "Please enter your name", 
      minlength: "Name should be more than 2 characters", 
      maxlength: "Name should be less than 20 characters", 
      lettersonly: "Name should contain only letters" 
      }, 
     ssn: { 
      required: "Please enter your NRIC", 
      minlength: "NRIC should be more than 9 characters", 
      maxlength: "NRIC should be less than 9 characters", 
      nowhitespace: "NRIC should not have any spaces" 
      }, 
     gender: { 
      required: "Please select your gender", 
      }, 
     mobile: { 
      required: "Please enter your mobile number", 
      minlength: "Mobile number should be more than 10 characters", 
      maxlength: "Mobile number should be less than 13 characters", 
      digits: "Mobile number should contain only digits" 
      }, 
     address: { 
      required: "Please enter your address", 
      minlength: "Address should be more than 10 characters", 
      }, 
     email: { 
      required: "Please enter your email address", 
      minlength: "Password should be more than 6 characters", 
      email: "Please enter a valid email address" 
      } 
    }, 
    }); 

    $("#submit").click(function(){ 
     $("#form").submit(); 
     return false; 
     }); 

    }); 
    </script> 

    <div id="form"> 
    <center> 
    <form id="form"> 
    <div class="col-xs-12"> 
    <input type="text" name="name" id="name" placeholder="Name" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="nric" id="nric" placeholder="NRIC" required /> 
    </div> 
    <div class="col-xs-12"> 
    <select class="dropdown" id="gender" onChange="changeColor(this)"> 
    <option value="" disabled selected>Gender</option> 
    <option value="female">Female</option> 
    <option value="male">Male</option> 
    </select> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="mobile" id="mobile" placeholder="Mobile" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="text" name="address" id="address" placeholder="Address" required /> 
    </div> 
    <div class="col-xs-12"> 
    <input type="email" name="email" id="email" placeholder="Email" required /> 
    </div> 
    <input id="submit" class="button" type="submit" value="submit"/> 
    </form> 
</center> 
</div> 

Answer 1

때문에 검증이되지 않은 form에 div에 할당됩니다

여기 내 코드입니다.

div의 id 값을 다른 값으로 변경하십시오.

또한 additional-methods.js 파일 query.validate.js 후 추가해야하고 있기 때문에 validate 그래서

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script> 
<div> 
    <center> 
     <form id="form"> 
      <div class="col-xs-12"> 
       <input type="text" name="name" id="name" placeholder="Name" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="nric" id="nric" placeholder="NRIC" required /> 
      </div> 
      <div class="col-xs-12"> 
       <select class="dropdown" id="gender" onChange="changeColor(this)"> 
        <option value="" disabled selected>Gender</option> 
        <option value="female">Female</option> 
        <option value="male">Male</option> 
       </select> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="mobile" id="mobile" placeholder="Mobile" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="text" name="address" id="address" placeholder="Address" required /> 
      </div> 
      <div class="col-xs-12"> 
       <input type="email" name="email" id="email" placeholder="Email" required /> 
      </div> 
      <input id="submit" class="button" type="submit" value="submit"/> 
     </form> 
    </center> 
</div> 

다음

jQuery(function ($) { 
    $('#form').validate({ 
     rules: { 
      name: { 
       required: true, 
       minlength: 2, 
       maxlength: 20, 
       lettersonly: true 
      }, 
      ssn: { 
       required: true, 
       minlength: 9, 
       maxlength: 9, 
       nowhitespace: true 
      }, 
      gender: { 
       required: true 
      }, 
      mobile: { 
       required: true, 
       minlength: 10, 
       maxlength: 13, 
       digits: true 
      }, 
      address: { 
       required: true, 
       minlength: 10, 
      }, 
      email: { 
       required: true, 
       minlength: 6, 
       email: true 
      } 
     }, 
     messages: { 
      name: { 
       required: "Please enter your name", 
       minlength: "Name should be more than 2 characters", 
       maxlength: "Name should be less than 20 characters", 
       lettersonly: "Name should contain only letters" 
      }, 
      ssn: { 
       required: "Please enter your NRIC", 
       minlength: "NRIC should be more than 9 characters", 
       maxlength: "NRIC should be less than 9 characters", 
       nowhitespace: "NRIC should not have any spaces" 
      }, 
      gender: { 
       required: "Please select your gender", 
      }, 
      mobile: { 
       required: "Please enter your mobile number", 
       minlength: "Mobile number should be more than 10 characters", 
       maxlength: "Mobile number should be less than 13 characters", 
       digits: "Mobile number should contain only digits" 
      }, 
      address: { 
       required: "Please enter your address", 
       minlength: "Address should be more than 10 characters", 
      }, 
      email: { 
       required: "Please enter your email address", 
       minlength: "Password should be more than 6 characters", 
       email: "Please enter a valid email address" 
      } 
     }, 
    }); 
}); 

데모 내 alert()의 구문 오류가 : Fiddle

Answer 2

안녕하세요 라이브러리에 맞춤 규칙을 생성해야합니다.`검증 객체에 존재하고, 다음이

$.validator.addMethod("valueNotEquals", function(value, element, arg){ 
    return arg != value; 
} 

과 같은 5,는`경고 ("BBBB") 무엇이이

rules: { 
     gender: {valueNotEquals: "default"}            
    }, 
    messages: { 
     gender: { valueNotEquals: "Please select a payment method"}   

    }