jquery 유효성 검사 문제 : 양식 유효성 검사가 작동하지 않습니다.

-1

제 문의 양식에 유효성 확인 스크립트 jquery를 구현하는 데 문제가 있습니다. 여기에 양식 및 자바 스크립트 양식 유효성 검사를위한 HTML 코드가 있습니다. Jquery 유효성 검사 1.13.1을 사용하고 있습니다. [url] http://jqueryvalidation.org/[/url], 제출 버튼을 클릭해도 아무 일도 일어나지 않지만 유효성 검사 메시지가 표시되지 않습니다. 양식은 현재 약간 거칠다. 그러나 지금 내가 성취하고자하는 것은 양식 검증이다. 누군가 도와 주면 감사하겠습니다. 감사합니다jquery 유효성 검사 문제 : 양식 유효성 검사가 작동하지 않습니다.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>contact us</title> 
<link rel="shortcut icon" href="images/favicon.png" type="image/png"/> 
<link href="style/global.css" rel="stylesheet" type="text/css" /> 
<link href="style/default/layout.css" rel="stylesheet" type="text/css" /> 
<link href="style/default/home.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="css/screen.css"> 
<script src="jquery.js"></script> 
<script src="jquery.validate.js"></script> 
<script language="javascript" type="text/javascript" src="js/gcws.js"></script> 
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script> 
<script language="javascript" type="text/javascript" src="js/default/home.js"></script> 
<script language="javascript" type="text/javascript" src="js/customTracking.js"></script> 
<script> 
    $.validator.setDefaults({ 
     submitHandler: function() { 
      alert("submitted!"); 
     } 
    }); 

    $().ready(function() { 
     // validate the comment form when it is submitted 
     $("#commentForm").validate(); 

     // validate signup form on keyup and submit 
     $("#signupForm").validate({ 
      rules: { 
       firstname: "required", 
       lastname: "required", 
       username: { 
        required: true, 
        minlength: 2 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 
       confirm_password: { 
        required: true, 
        minlength: 5, 
        equalTo: "#password" 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       topic: { 
        required: "#newsletter:checked", 
        minlength: 2 
       }, 
       agree: "required" 
      }, 
      messages: { 
       firstname: "Please enter your firstname", 
       lastname: "Please enter your lastname", 
       username: { 
        required: "Please enter a username", 
        minlength: "Your username must consist of at least 2 characters" 
       }, 
       password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
       }, 
       confirm_password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long", 
        equalTo: "Please enter the same password as above" 
       }, 
       email: "Please enter a valid email address", 
       agree: "Please accept our policy" 
      } 
     }); 

     // propose username by combining first- and lastname 
     $("#username").focus(function() { 
      var firstname = $("#firstname").val(); 
      var lastname = $("#lastname").val(); 
      if (firstname && lastname && !this.value) { 
       this.value = firstname + "." + lastname; 
      } 
     }); 

     //code to hide topic selection, disable for demo 
     var newsletter = $("#newsletter"); 
     // newsletter topics are optional, hide at first 
     var inital = newsletter.is(":checked"); 
     var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); 
     var topicInputs = topics.find("input").attr("disabled", !inital); 
     // show when newsletter is checked 
     newsletter.click(function() { 
      topics[this.checked ? "removeClass" : "addClass"]("gray"); 
      topicInputs.attr("disabled", !this.checked); 
     }); 
    }); 
    </script> 
<style type="text/css"> 
div#container 
{ 
    width: 800px; 
    height: 1200px; 
    margin-top: 0px; 
    margin-left: 0px; 
    text-align: left; 
} 
</style> 
<style type="text/css"> 
body 
{ 
    background-color: #FFFFFF; 
    color: #000000; 

} 
</style> 
<style type="text/css"> 
a:active 
{ 
    color: #0000FF; 
} 
a:hover 
{ 
    color: #E49282; 
} 
</style> 
<!--[if lt IE 7]> 
<style type="text/css"> 
    img { behavior: url("pngfix.htc"); } 
</style> 
<![endif]--> 
</head> 
<body> 
<div id="container"> 
<form class="cmxform" id="commentForm" method="get" action=""> 
    <div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;"> 
    <img src="images/bg2_01.jpg" alt="" width="817" border="0" align="top" id="" style="width:969px;height:853px;"></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;"> 
<img src="images/bv01003_01_01_01.png" id="" alt="" align="top" border="0" style="width:969px;height:245px;"></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;"> 
    <h4><b>HOME</b></h4></div> 

<div id="bv_" style="margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;"> 
<h4><b>HOME</b></h4></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;"> 
    <h4><b>HOME</b></h4></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;"> 
<h4><b>HOME</b></h4></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;"> 
<h4><b>HOME</b></h4></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;"> 
    <img src="images/leftbar.jpg" id="" alt="" align="top" border="0" style="width:197px;height:853px;"></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left; z-index:32;"> 
<h1>Quick links</h1> 
<h3><li style="list-style-type: none;">About us</li> 
<li style="list-style-type: none;">Careers</li></a> 
<li style="list-style-type: none;">Mission Statement</li> 

</h3></div> 
<div id="bv_" style="margin:0; padding:0; position:absolute; left:708px; top:113px; width:695px; height:827px; text-align:left; z-index:13;"> 
    <h1><b>Contact Us</b></h1><br> 
    <h3><br> 
<p> 
<b>General Enquiry</b>: <br> 
<b>Help</b> 
:<br> 
<b>Request quote</b> 
: <br> 
</h3> 
<input type="text" id="firstname" style="position:absolute; left:10px; top:258px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:2" name="firstname" value=""> 
<div id="bv_Text2" style="margin:0; padding:0; position:absolute; left:10px; top:238px; width:71px; height:16px; text-align:left; z-index:3;"> 
<font style="font-size:13px" color="#000000" face="Arial">First Name</font></div> 
<input type="text" id="Editbox2" style="position:absolute; left:10px; top:311px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:4" name="Lastname" value=""> 
<div id="bv_Text3" style="margin:0; padding:0; position:absolute; left:10px; top:287px; width:71px; height:16px; text-align:left; z-index:5;"> 
<font style="font-size:13px" color="#000000" face="Arial">Last Name</font></div> 
<div id="bv_Text4" style="margin:0; padding:0; position:absolute; left:10px; top:342px; width:71px; height:16px; text-align:left; z-index:6;"> 
<font style="font-size:13px" color="#000000" face="Arial">Email</font></div> 
<input type="text" id="Editbox3" style="position:absolute; left:10px; top:362px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:7" name="Email" value=""> 
<div id="bv_Text5" style="margin:0; padding:0; position:absolute; left:10px; top:397px; width:158px; height:16px; text-align:left; z-index:8;"> 
<font style="font-size:13px" color="#000000" face="Arial">Telephone number</font></div> 
<input type="text" id="Editbox4" style="position:absolute; left:10px; top:419px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:9" name="Telephone" value=""> 
<div id="bv_Text6" style="margin:0; padding:0; position:absolute; left:10px; top:452px; width:254px; height:16px; text-align:left; z-index:10;"> 
<font style="font-size:13px" color="#000000" face="Arial">What is your question or topic regarding?*</font></div> 
<div style="position:absolute; left:10px; top:475px; width:270px; height:24px; border:1px #C0C0C0 solid; z-index:11"> 
<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;"> 
<select id="topic" name="topic" title="Please select a topic" required> 
         <option></option> 
         <option>topic1</option> 
         <option>topic2</option> 
         <option>topic3</option> 
</select> 
</div> 
<textarea name="TextArea1" id="TextArea1" style="position:absolute; left:10px; top:530px; width:271px; height:148px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:12" rows="6" cols="29"></textarea> 
<div id="bv_Text7" style="margin:0; padding:0; position:absolute; left:10px; top:505px; width:254px; height:16px; text-align:left; z-index:13;"> 
<font style="font-size:13px" color="#000000" face="Arial">Please tell us what's on your mind:*</font></div> 
<input type="submit" id="submit" name="Button1" value="Submit" style="position:absolute; left:208px; top:700px; width:75px; height:24px; font-family:Arial; font-size:13px; z-index:14"> 
</form> 
</body> 
</html>

출처

2014-11-15 stan

먼저 코드를 정리하십시오! 모든 인라인 스타일은 중요한 것을 결정하는 것을 어렵게 만듭니다. 그리고 무엇보다도, 당신은 (그 중 가까운 한 당신에게 있지만)을 선택 내 선택을 갖고있는 것 같다 :

<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;"> 
<select id="topic" name="topic" title="Please select a topic" required> 
    <option></option> 
    <option>topic1</option> 
    <option>topic2</option> 
    <option>topic3</option> 
</select>

그리고 다른 문제는 당신이 양식을 검증하는 것을 포함 (ID = commentForm) 위치를 천국 ' 어떤 규칙도 정의하지 않았습니다 :

$("#commentForm").validate();

그래서 양식에 어떤 필드가 필요한지 알 수 없습니다. (ID가 "signupForm"인 양식에 대해 규칙이 결정되지만 해당 양식이 전혀 코드에 나타나지 않습니다 ...)

HTML 코드를 조금만 정리했습니다. :

스크립트에 관해서는, "규칙"당신은 당신의 폼 요소의 이름 (안 ID 또는 뭔가 다른)를 사용합니다 (아래 참조)에서 다음

<form class="cmxform" id="commentForm" method="get" action=""> 

    <p>First Name</p> 
    <input type="text" id="firstname" name="firstname" value="" /> 

    <p>Last Name</p> 
    <input type="text" id="Editbox2" name="lastname" value="" /> 

    <p>Email</p> 
    <input type="text" id="Editbox3" name="email" value="" /> 

    <p>Telephone number</p> 
    <input type="text" id="Editbox4" name="telephone" value="" /> 

    <p>What is your question or topic regarding?*</p> 
    <select id="topic" name="topic" title="Please select a topic"> 
     <option></option> 
     <option>topic1</option> 
     <option>topic2</option> 
     <option>topic3</option> 
    </select> 


    <p>Please tell us what's on your mind:*</p> 
    <textarea name="onyourmind" id="TextArea1" rows="6" cols="29"></textarea> 

    <input type="submit" id="submit" name="Button1" value="Submit" /> 
</form>

$("#commentForm").validate({ 
    rules: { 
     firstname: "required", 
     lastname: "required", 
     email: { 
      required: true, 
      email: true 
     }, 
     telephone: "required", 
     topic: { 
      required: true 
     }, 
     onyourmind: "required" 
     }, 
     messages: { 
      firstname: "Please enter your first name", 
      lastname: "Please enter your last name", 
      email: "Please enter a valid email address", 
      telephone: "Please enter your phone number", 
      topic: "Please choose a topic", 
      onyourmind: "Please tell us what's on your mind" 
     } 
    }); 
});

을

(물론 "규칙"은 어떤 양식 e에 따라 조정될 수 있고 조정되어야합니다. lements이 양식을 제출하기 위해 필요합니다)

가 여기에 위의 코드가 포함 된 바이올린의 :. http://jsfiddle.net/Niffler/n7750jkt/
을 그리고 여기에 내가() 결함이있는 선택을 제외하고 HTML 코드를 변경하지 않는 하나 : http://jsfiddle.net/Niffler/xt6jaaen/

출처

2014-11-15 14:46:53 Niffler

jquery 유효성 검사 문제 : 양식 유효성 검사가 작동하지 않습니다.

답변

관련 문제