jQuery 유효성 검사 : 오류가 표시되지 않습니다.

Question

코드에 jQuery 유효성 검사를 추가했으며 각 필드의 사용자 정의 메시지가 표시되지 않습니다. 검증 된 필드와 기본 팝업에서 빨간색 상자가 나타납니다. "이것은 필수 필드입니다."

하면 코드에서 봐 주시기 바랍니다 : 당신의 도움에 대한

<script src="~/Scripts/jquery-1.10.2.intellisense.js" type="text/javascript"></script> 
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script> 
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script> 
<script src="~/Scripts/jquery.validate.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#form").validate({ 
       rules: { 
        firstname: { 
         required: true 
        }, 
        lastname: { 
         required: true 
        }, 
        email: { 
         required: true 
        }, 
        message: { 
         required: true 
        } 
       }, 
       messages: { 
        firstname: "Enter your first name", 

        lastname: "Enter your last name", 

        email: "Enter your email", 

        message: "Enter the message" 

       }, 
      }); 
     }); 


    </script> 


<form id="form" action="" method="post"> 
    <fieldset> 
     <label for="firstname">First name: </label> 
     <input type="text" name="firstname" id="firstname" required /> <br /> 
    </fieldset> 
    <fieldset> 
     <label for="lastname">Last name: </label> 
     <input type="text" name="lastname" id="lastname" required /> <br /> 
    </fieldset> 
    <fieldset> 
     <label for="email">Email: </label> 
     <input type="email" name="email" id="email" required /> <br /> 
    </fieldset> 
    <fieldset> 
     <label for="message">Message: </label> 
     <textarea name="message" id="message" required ></textarea> 
    </fieldset> 
    <input type="submit" id="submit" value="Submit"/> 
</form> 

감사합니다.

Answer 1

js 파일을 여러 개 포함하면 문제가 발생했습니다. 또한 validate.js에 대한 적절한 참조가 있는지 확인하십시오.

.mr15{ 
 
    margin-right:15px; 
 
} 
 

 
label.error{ 
 
color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $("#form").validate({ 
 
       rules: { 
 
        firstname: { 
 
         required: true 
 
        }, 
 
        lastname: { 
 
         required: true 
 
        }, 
 
        email: { 
 
         required: true 
 
        }, 
 
        message: { 
 
         required: true 
 
        } 
 
       }, 
 
       messages: { 
 
        firstname: "Enter your first name", 
 

 
        lastname: "Enter your last name", 
 

 
        email: "Enter your email", 
 

 
        message: "Enter the message" 
 

 
       }, 
 
      }); 
 
     }); 
 

 

 
    </script> 
 

 

 
<form id="form" action="" method="post"> 
 
    <fieldset> 
 
     <label for="firstname">First name: </label> 
 
     <input type="text" name="firstname" id="firstname" class="mr15" required /> <br /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label for="lastname">Last name: </label> 
 
     <input type="text" name="lastname" id="lastname" class="mr15" required /> <br /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label for="email" >Email: </label> 
 
     <input type="email" name="email" id="email" class="mr15" required /> <br /> 
 
    </fieldset> 
 
    <fieldset> 
 
     <label for="message">Message: </label> 
 
     <textarea name="message" id="message" class="mr15" required ></textarea> 
 
    </fieldset> 
 
    <input type="submit" id="submit" value="Submit"/> 
 
</form>