Jquery 유효성 검사기 플러그인이 복합 이름을 사용하여 유효성을 검사하지 않습니다.

Question

다음 양식이 있습니다.

<form id="edit-form" action="" method="post"> 
<div class="row"> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_first_name">First Name:<span class="help-inline"> *</span></label> 
     <input class="form-control input-sm" id="id_customer-first_name" maxlength="150" name="customer-first_name" type="text" value="Neville"> 
    </div> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_middle_name">Middle Name:</label> 
     <input class="form-control input-sm" id="id_customer-middle_name" maxlength="150" name="customer-middle_name" type="text"> 
    </div> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_last_name">Last Name:<span class="help-inline"> *</span></label> 
     <input class="form-control input-sm" id="id_customer-last_name" maxlength="200" name="customer-last_name" type="text" value="Sarginson"> 
    </div> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_telephone">Telephone:<span class="help-inline"> *</span></label> 
     <input class="form-control input-sm" id="id_customer-telephone" maxlength="25" name="customer-telephone" placeholder="(XXX) XXX-XXXX" type="text"> 
    </div> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_mobile">Mobile No:</label> 
     <input class="form-control input-sm" id="id_customer-mobile" maxlength="25" name="customer-mobile" type="text"> 
    </div> 
    <div class="form-group col-md-2 col-xs-2 col-lg-2"> 
     <label for="id_work_phone">Work Phone No:</label> 
     <input class="form-control input-sm" id="id_customer-work_phone" maxlength="25" name="customer-work_phone" type="text"> 
    </div> 
</div> 
</form> 

jquery 유효성 검사 플러그인을 사용하여 다음과 같이 양식의 입력을 확인합니다.

$('#edit-form').validate({ 
      /* @validation states + elements 
       ------------------------------------------- */ 

       errorClass: "state-error", 
       validClass: "state-success", 
       errorElement: "em", 

       /* @validation rules 
       ------------------------------------------ */ 

       rules: { 
         "customer-first_name": { 
           required: true 
         }, 
         "customer-last_name": { 
           required: true 
         }, 
         "customer-email": { 
           required: true, 
           email: true 
         }, 
         "customer-telephone": { 
           required: true 
         } 
       }, 

       /* @validation error messages 
       ---------------------------------------------- */ 

       messages:{ 
         "customer-first_name": { 
           required: 'Enter first name' 
         }, 
         "customer-last_name": { 
           required: 'Enter last name' 
         }, 
         "customer-email": { 
           required: 'Enter email address', 
           email: 'Enter a VALID email address' 
         }, 
         "customer-telephone": { 
           required: 'Enter patient\'s telephone number' 

         } 
       }, 

       /* @validation highlighting + error placement 
       ---------------------------------------------------- */ 

       highlight: function(element, errorClass, validClass) { 
         $(element).closest('.field').addClass(errorClass).removeClass(validClass); 
       }, 
       unhighlight: function(element, errorClass, validClass) { 
         $(element).closest('.field').removeClass(errorClass).addClass(validClass); 
       }, 
       errorPlacement: function(error, element) { 
        if (element.is(":radio") || element.is(":checkbox")) { 
          element.closest('.option-group').after(error); 
        } else { 
          error.insertAfter(element.parent()); 
        } 
       } 


     }); 

적절한 js 라이브러리가 포함되어 있지만 여전히 유효성을 검사하지 않습니다. 내가 뭔가 잘못하고 있는거야?

Answer 1

예, 올바르게 입력해야합니다. 복잡한 이름은 따옴표로 묶어야합니다. 당신이 우리에게 제시 한 그러나

, 코드, 노력하고 있습니다 : http://jsfiddle.net/7pmc6q9c/

.... 
    rules: { 
     "customer-first_name": { 
      required: true 
     }, 
     "customer-last_name": { 
      required: true 
     }, 
     "customer-email": { 
      required: true, 
      email: true 
     }, 
     "customer-telephone": { 
      required: true 
     } 
    }, 
.... 

검증 거기에 아무것도 귀하의 customer-first_name 및 customer-last_name 필드는 이미 HTML에 설정된 값이

• 사용자가 그들을 비우지 않는 한.

• customer-email 필드가 HTML에 존재하지 않아 유효성 검사가 무시됩니다.

• 귀하의 customer-telephone 필드는 귀하가 지정한 것과 정확히 일치합니다.