php - 我无法使用 jQuery 验证验证并提交表单

标签 php jquery validation form-submit

我已经在这里和其他网站上挖掘了一段时间，但陷入困境。我正在尝试使用 jQuery 来验证我的表单(在用户填写表单的同时)，如果表单有效，则将其提交到我创建的用于处理表单内容的 php 页面。我已经能够验证它，但我不能让它也提交它...如果我为表单操作参数输入一个值，那么它会绕过验证。请帮忙...

对于错误的编码，我提前表示歉意。 这是我的 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 验证。

我对表单验证很陌生。有人能指出我正确的方向吗？谢谢，提前!

最佳答案

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

//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;
    }
});

关于php - 我无法使用 jQuery 验证验证并提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9352546/

上一篇：php - AJAX Jquery PHP 表单验证

下一篇：jQuery - 显示画廊的前三张图像；隐藏剩余部分

相关文章：

ruby-on-rails - 验证特定操作的模型

php - 允许用户每小时提交一次输入？

jquery toggleClass() - 访问选定的元素

ruby-on-rails - Rails 包含验证

javascript - Javascript 数据表中的自动换行列数据

javascript - 如何在 jquery mobile 中调用页面加载函数以及如何将数据从一个页面传递到另一个页面

c# - 自定义验证器触发但不更新 ValidationSummary

php - 具有可变大小变量列表的 MySQL 准备语句

包含 samesite 参数的 PHP setcookie 函数不起作用

php - 如何读取php套接字连接响应？

©2024 IT工具网  联系我们