Question

我一直在这里和其他地方挖掘一段时间而且被卡住了。我正在尝试使用jQuery来验证我的表单（同时用户填写表单），如果表单有效，请将其提交到我创建的php页面以处理表单的内容。我已经能够验证它，但我不能让它也提交它...如果我为表格动作parm输入一个值，那么它会绕过验证。请帮忙......

我提前为错误的编码道歉。这是我的jquery-validate.js：

//global vars
var form = $("#customForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var pass1Info = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var message = $("#message");

function validateName(){
//if it's NOT valid
if(name.val().length < 4){
    name.addClass("error");
    nameInfo.text("We want names with more than 3 letters!");
    nameInfo.addClass("error");
    return false;
}
//if it's valid
else{
    name.removeClass("error");
    nameInfo.text("What's your name?");
    nameInfo.removeClass("error");
    return true;
}
}
function validatePass1(){
var a = $("#password1");
var b = $("#password2");

//it's NOT valid
if(pass1.val().length <5){
    pass1.addClass("error");
    pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
    pass1Info.addClass("error");
    return false;
}
//it's valid
else{
    pass1.removeClass("error");
    pass1Info.text("At least 5 characters: letters, numbers and '_'");
    pass1Info.removeClass("error");
    validatePass2();
    return true;
}
}
function validatePass2(){
var a = $("#password1");
var b = $("#password2");
//are NOT valid
if( pass1.val() != pass2.val() ){
    pass2.addClass("error");
    pass2Info.text("Passwords doesn't match!");
    pass2Info.addClass("error");
    return false;
}
//are valid
else{
    pass2.removeClass("error");
    pass2Info.text("Confirm password");
    pass2Info.removeClass("error");
    return true;
}
}
function validateMessage(){
//it's NOT valid
if(message.val().length < 10){
    message.addClass("error");
    return false;
}
//it's valid
else{
    message.removeClass("error");
    return true;
}
}
/*
Validate the name field in: blur and keyup events.
Validate the email field in: blur event.
Validate the password fields in: blur and keyup events.
Validate the message field in: blur, and keyup event.
Validate all fields in: submit form event
*/

//On blur
name.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
//On key press
name.keyup(validateName);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
message.keyup(validateMessage);
//On Submitting
form.submit(function(){
if(validateName() && validateEmail() && validatePass1() && validatePass2() && validateMessage()) 
    return true; 
else
    return false;
});

我的表单代码粘贴在这里：

<form method="post" id="customForm" action="rcv-form1.php">
        <div>
            <label for="name">Name</label>
            <input id="name" name="name" type="text" />
            <span id="nameInfo">What's your name?</span>
        </div>
        <div>
            <label for="email">E-mail</label>
            <input id="email" name="email" type="text" />
            <span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
        </div>
        <div>
            <label for="pass1">Password</label>
            <input id="pass1" name="pass1" type="password" />
            <span id="pass1Info">At least 5 characters: letters, numbers and '_'</span>
        </div>
        <div>
            <label for="pass2">Confirm Password</label>
            <input id="pass2" name="pass2" type="password" />
            <span id="pass2Info">Confirm password</span>
        </div>
        <div>
            <label for="message">Message</label>
            <textarea id="message" name="message" cols="" rows=""></textarea>
        </div>
        <div>
            <input id="send" name="send" type="submit" value="Send" />
        </div>
    </form>

这是我的php接收表单（这只是用于现在测试。一旦我知道我可以正确验证内容，我将通过电子邮件发送或插入mySQL）：

<html><head>
<title>Display form values</title>
</head>
<body>
<?
//$valid_form = TRUE;
//$bad_field_count = 0;

$table1_beg = '<center><table align="center" bordercolor="#F00" width="600px" border="3" cellspacing="1" cellpadding="1"><caption>Form status</caption><tr><th scope="col">Field Name</th><th scope="col">Field Value</th></tr>';

$row_beg = '<tr><td>';
$td = '</td><td>';
$row_end = '</td></tr>';

$table1_end = '</table></center>';

function checkEmail($field)
{
if (filter_var($field, FILTER_VALIDATE_EMAIL)) {
    //echo "This ($field) email address is considered valid.";
    return $field;
  } else {
      $field = filter_var($field, FILTER_SANITIZE_EMAIL);
      //global $bad_field_count; $bad_field_count++;
      return $field;
  }
}
function SanitizeString($field)
{
    $field = filter_var($field, FILTER_SANITIZE_STRING);
    //if(is_null($field) || $field == '') { global $bad_field_count; $bad_field_count++;}
    return $field;
}


// ensure form data is valid
$name=SanitizeString($_POST['name']);

//$email=$_POST['email'];
$email = checkEmail($_POST['email']);

$pass1=SanitizeString($_POST['pass1']);

$pass2=SanitizeString($_POST['pass2']);

$message=SanitizeString($_POST['message']);

    echo $table1_beg;
    echo $row_beg . "Name" . $td . "<u>" . $name . "</u>" . $row_end;
    echo $row_beg . "Email" . $td . "<u>" . $email . "</u>" . $row_end;
    echo $row_beg . "Password 1" . $td . "<u>" . $pass1 . "</u>" . $row_end;
    echo $row_beg . "Password 2" . $td . "<u>" . $pass2 . "</u>" . $row_end;
    echo $row_beg . "Message" . $td . "<u>" . nl2br($message) . "</u>" . $row_end;
        //echo $row_beg . "Number of bad fields" . $td . "<b>" . $bad_field_count . "</b>" . $row_end;
    echo $table1_end;
    //}

?>
</body></html>

问题1：当我有表格action=""时，我可以在点击提交后验证表格...在提交之后我不认为它是无效的，因为我认为它应该同时进行，因为它是输入的。问题2：如果我将表单操作设置为除“”之外的任何内容，它将一起忽略jQuery验证。

我是表单验证的新手。有人能指出我正确的方向吗？提前谢谢！

Answer 1

您遇到一些问题，表单提交代码周围没有大括号，而且您没有验证电子邮件的功能，请尝试以下操作：

//global vars
var form = $("#customForm");
var fname = $("#name");
var nameInfo = $("#nameInfo");
var email = $("#email");
var emailInfo = $("#emailInfo");
var pass1 = $("#pass1");
var pass1Info = $("#pass1Info");
var pass2 = $("#pass2");
var pass2Info = $("#pass2Info");
var message = $("#message");

function validateName() {
    //if it's NOT valid
    if (fname.val().length < 4) {
        fname.addClass("error");
        nameInfo.text("We want names with more than 3 letters!");
        nameInfo.addClass("error");
        return false;
    }
    //if it's valid
    else {
        fname.removeClass("error");
        nameInfo.text("What's your name?");
        nameInfo.removeClass("error");
        return true;
    }
}

function validatePass2() {
    var a = $("#password1");
    var b = $("#password2");
    //are NOT valid
    if (pass1.val() != pass2.val()) {
        pass2.addClass("error");
        pass2Info.text("Passwords doesn't match!");
        pass2Info.addClass("error");
        return false;
    }
    //are valid
    else {
        pass2.removeClass("error");
        pass2Info.text("Confirm password");
        pass2Info.removeClass("error");
        return true;
    }
}

function validatePass1() {
    var a = $("#password1");
    var b = $("#password2");

    //it's NOT valid
    if (pass1.val().length < 5) {
        pass1.addClass("error");
        pass1Info.text("Ey! Remember: At least 5 characters: letters, numbers and '_'");
        pass1Info.addClass("error");
        return false;
    }
    //it's valid
    else {
        pass1.removeClass("error");
        pass1Info.text("At least 5 characters: letters, numbers and '_'");
        pass1Info.removeClass("error");
        validatePass2();
        return true;
    }
}

function validateMessage() {
    //it's NOT valid
    if (message.val().length < 10) {
        message.addClass("error");
        return false;
    }
    //it's valid
    else {
        message.removeClass("error");
        return true;
    }
}

function validateEmail(){
    //add validation for email here
    return true;
}
/*
Validate the name field in: blur and keyup events.
Validate the email field in: blur event.
Validate the password fields in: blur and keyup events.
Validate the message field in: blur, and keyup event.
Validate all fields in: submit form event
*/

//On blur
fname.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
//On key press
fname.keyup(validateName);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
message.keyup(validateMessage);
//On Submitting
form.submit(function() {
    if (validateName() && validateEmail() && validatePass1() && validatePass2() && validateMessage()) {
        return true;
    }
    else {
        return false;
    }
});

Answer 2

我已经给你一个简单的方法来验证你的所有输入/ textarea在一个功能，但你必须完成它，我刚刚给你结构，只有名称验证已经作为一个例子给你，我希望你可以很容易地理解它。如果您需要更多帮助/困难，请留言。这应放在准备好的事件中。

var info={
    'nameInfo':$("#nameInfo"),
    'emailInfo':$("#emailInfo"),
    'pass1Info':$("#pass1Info"),
    'pass2Info':$("#pass2Info")
}
$('#customForm input,textarea').not("#send").bind('blur keyup', function(e)
{
    e.stopPropagation();
    var el=$(e.target);
    var id=el.attr('id');

    if(el.attr('id')=='message' && e.type=="keyup") 
    {
        return false;
    }   
    else 
    {
        if(id=="name")
        {   if(el.val().length < 4)
            {
                el.addClass("error");
                info.nameInfo.text("We want names with more than 3 letters!");
                info.nameInfo.addClass("error");
                return false;
            }
            else
            {
                el.removeClass("error");
                info.nameInfo.text("What's your name ?");
                info.nameInfo.removeClass("error");
                return true;
            }
        }

        if(id=="email")
        {
            // Your email validation code   
        }   
        if(id=="pass1")
        {
             // Your pass1 validation code  
        }
        if(id=="pass2")
        {
             // Your pass2 validation code  
        }
        if(id=="message")   
        {   
             // Your message validation code    
        }
    }   
});

我无法使用jQuery验证来验证和提交表单

2 个答案: