Question

好的我有一个包含Yes和No单选按钮的表单。当用户点击其中任何一个时，它会触发一个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

Hello Jacob，您似乎需要了解一些基础知识，以便创建基于良好且整洁的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>

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

2 个答案: