jquery验证resetForm（）函数不起作用

Question

好吧我有一个窗体有，没有单选按钮。当用户点击其中一个时，它会触发一个radioChanged（）函数，该函数检查哪个框被检查。如果选中“否”，则会显示电子邮件字段并根据规则验证表单。如果用户点击“是”，我需要验证重置并清除，但似乎没有工作。如果选中“是”而不需要电子邮件字段，我是否应该进行新的验证？

<script type="text/javascript"> 
    var validator = $("#newClient"); 

    function radioChange() { 
     if (document.getElementById("yesbutton").checked == true) { 
      document.getElementById("emailSpan").style.display = "none"; 
      document.getElementById("cemailSpan").style.display = "none"; 
      document.getElementById("emailError").style.display = "none"; 
      document.getElementById("cemailError").style.display = "none"; 
      validator.resetForm(); 
     } else if (document.getElementById("nobutton").checked == true) { 
      document.getElementById("emailSpan").style.display = 'block'; 
      document.getElementById("cemailSpan").style.display = 'block'; 
      document.getElementById("emailError").style.display = "block"; 
      document.getElementById("cemailError").style.display = "block"; 

      validator.validate({ 
       rules: { 
        Email: { 
         required: true, 
         minlength: 4, 
         maxlength: 48, 
         email: true 
        }, 
        ConfirmEmail: { 
         required: true, 
         minlength: 4, 
         maxlength: 48, 
         email: true, 
         equalTo: "#Email" 
        } 
       }, 
       messages: { 
        Email: { 
         required: "Please enter a valid email address", 
         email: "Please enter a valid email address", 
         maxlength: "Max length is 48" 
        }, 
        ConfirmEmail: { 
         required: "Please enter a valid email address", 
         email: "Please enter a valid email address", 
         maxlength: "Max length is 48", 
         equalTo: "Emails do not match" 
        } 
       }, 
       errorPlacement: function(error, element) { 
        if (element.attr("name") == "ConfirmEmail") error.appendTo("#cemailError"); 
        else if (element.attr("name") == "Email") error.appendTo("#emailError"); 
       } 
      }) 
     } 
    } 
</script> 

Answer 1

你好雅各，似乎你需要知道建立一个良好基础，整洁的Java脚本代码的一些基础知识。我认为你的代码的问题是你正在做一些有时无法看到的小问题。这是一个更新的代码，告诉我这是否有效。

var validator = $("#newClient"); 

function radioChange() { 
    if (document.getElementById("yesbutton").checked === true) { 
     document.getElementById("emailSpan").style.display = "none"; 
     document.getElementById("cemailSpan").style.display = "none"; 
     document.getElementById("emailError").style.display = "none"; 
     document.getElementById("cemailError").style.display = "none"; 
     validator.resetForm(); 
    } else if (document.getElementById("nobutton").checked === true) { 
     document.getElementById("emailSpan").style.display = 'block'; 
     document.getElementById("cemailSpan").style.display = 'block'; 
     document.getElementById("emailError").style.display = "block"; 
     document.getElementById("cemailError").style.display = "block"; 

     validator.validate({ 
      rules: { 
       Email: { 
        required: true, 
        minlength: 4, 
        maxlength: 48, 
        email: true 
       }, 
       ConfirmEmail: { 
        required: true, 
        minlength: 4, 
        maxlength: 48, 
        email: true, 
        equalTo: "#Email" 
       } 
      }, 
      messages: { 
       Email: { 
        required: "Please enter a valid email address", 
        email: "Please enter a valid email address", 
        maxlength: "Max length is 48" 
       }, 
       ConfirmEmail: { 
        required: "Please enter a valid email address", 
        email: "Please enter a valid email address", 
        maxlength: "Max length is 48", 
        equalTo: "Emails do not match" 
       } 
      }, 
      errorPlacement: function(error, element) { 
       if (element.attr("name") === "ConfirmEmail") { 
        error.appendTo("#cemailError"); 
       } 
       else if (element.attr("name") === "Email") { 
        error.appendTo("#emailError"); 
       } 
      } 
     }); 
    } 
} 

希望这对您有所帮助！

Answer 2

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dentistJquery.aspx.cs" Inherits="dentistJquery" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Jquery Validation with Regular Expressions.</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> 
<script src="Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

    $.validator.addMethod("email", function(value, element) 
    { 
    return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value); 
    }, 

    "Please enter a valid email address."); 
//  if(document.getElementById("email").value !=null) 
//  { 

//  document.getElementById("contactnumber").style.display='block'; 
//  } 

    $.validator.addMethod("firstname",function(value,element){ 
    return this.optional(element) || /^[a-zA-Z0-9._-]{5,16}$/i.test(value); 
    },"First name is required and must be valid."); 

    $.validator.addMethod("lastname", function(value,element) 
    { 
    return this.optional(element) || /^[a-zA-Z0-9._-]{5,16}$/i.test(value); 
    }, "Last Name is required and must be valid."); 


    $.validator.addMethod("contactnumber",function(value,element){ 
    return this.optional(element) || /^[0-9\-\+]+$/i.test(value); 
    },"Contact Number is required and must be valid."); 

    $.validator.addMethod("comment" ,function(value,element){ 
    return this.optional(element) || /^[a-zA-Z0-9._-]{10,16}$/i.test(value); 
    }, "please Enter the comment at least 50 character"); 

     // Validate signup form 
     $("#signup").validate({ 
       rules: { 
         email: "required email", 
         firstname: "required firstname", 
         contactnumber: "required contactnumber", 
         lastname: "required lastname", 
         comment: "required comment", 
       }, 


     }); 

    }); 

</script> 

<style> 
*{ margin:0px; 
padding:0px; 
} 
body 
{ 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; 

} 
input 
{ 
width:220px; 
height:25px; 
font-size:13px; 
margin-bottom:10px; 
border:solid 1px #333333; 

} 
label.error 
{ 

font-size:11px; 
background-color:#cc0000; 
color:#FFFFFF; 
padding:3px; 
margin-left:5px; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
} 


</style> 

</head> 

<body> 

<div align="center"> 



<div style="width:650px; margin-top:20px" align="left"> 
<div style="margin-left:10px"> 
<form method="post" action="About.aspx" name="signup" id="signup"> 
<b>First Name</b><br /> 
<input type="text" name="firstname" value="Please Enter First Name" id="firstname" /><br /> 
<b>Last Name</b><br /> 
<input type="text" name="lastname" value=" Please Enter Last Name" id="lastname" /><br /> 

<b>Email</b><br /> 
<input type="text" name="email" value="Please Enter your Email " id="email" /><br /> 
<b>phone Number</b><br /> 
<input type="text" name="contactnumber" value=" Please Enter Your Contact Number" id="contactnumber" /><br /> 
<b>Message</b><br /> 
<textarea name="comment" id="comment" ></textarea> <br /><br /> 
<input type="submit" value=" Submit " name='SUBMIT' id="SUBMIT"/> 
</form> 
</div> 
</div> 
</div> 
</body> 
</html>