Jquery 隐藏提交按钮，直到表单有效_Jquery_Html_Ajax

Jquery 隐藏提交按钮，直到表单有效

jquery html ajax

Jquery 隐藏提交按钮，直到表单有效,jquery,html,ajax,Jquery,Html,Ajax,我对Jquery还比较陌生，所以这可能是一个简单的问题，但是有没有一种方法可以隐藏表单上的submit按钮，直到所有字段都经过验证验证需要是“按您键入”的解决方案。基本上我有3个字段-名字、姓氏和电子邮件。我希望“提交”按钮保持隐藏状态，直到填写了两个“名称”字段并在电子邮件字段中输入了有效的电子邮件地址表单本身使用AJAX将表单数据输入数据库。表单位于一个灯箱中，一旦单击“提交”按钮，灯箱将自动关闭您可以在此处看到一个示例：忽略“关闭此窗口”链接-这只是为了方便我，将在最终版本中删除

我对Jquery还比较陌生，所以这可能是一个简单的问题，但是有没有一种方法可以隐藏表单上的submit按钮，直到所有字段都经过验证

验证需要是“按您键入”的解决方案。基本上我有3个字段-名字、姓氏和电子邮件。我希望“提交”按钮保持隐藏状态，直到填写了两个“名称”字段并在电子邮件字段中输入了有效的电子邮件地址

表单本身使用AJAX将表单数据输入数据库。表单位于一个灯箱中，一旦单击“提交”按钮，灯箱将自动关闭

您可以在此处看到一个示例：

忽略“关闭此窗口”链接-这只是为了方便我，将在最终版本中删除

下面是表单的HTML代码，后面是JQuery/AJAX提交代码：

<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
  </li>
 </ul>
 <input type="submit" value="Submit" id="emailbutton" />
</form>

谢谢

我不知道您正在使用哪个验证插件，但我假设它将返回真/假。在ready处理程序或css中，将submit按钮的显示设置为“none”，然后在验证之后，使用JQuery show（）方法。比如：

if (formIsValid) {
    $("#submitID").show();
}

另一个更方便用户的选项是显示按钮，但在表单有效之前将其禁用，然后启用它

戴夫

$（文档）.ready（函数（）{
$（“#emailbutton”）.hide（）；
$（'input'）。更改（函数（e）{
if（$（'fname'）.val（）&&$（'fname'）.val（）&&$（'fname'）.val（）&&（'email'）.val（）&&validateEmail（$（'email'）.val（））{
$（'#emailbutton'）.show（）；
}
});
});
var validateEmail=函数（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回重新测试（电子邮件）；
};

更新

对不起，那个版本的小提琴可能有问题。再试一次？

资源

您的表单数据并没有那么大，如果您想了解一些新的内容，而不是在javascript端使用插件和验证，您可以手动执行一些操作（我认为）

嗯，我更喜欢通过服务器端进行验证，请看以下内容：

测试和工作：

index.htm

<html>
<head>
<title>Get more information</title>
</head>
<style>
.error {
    color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    $('#emailbutton').on('click', function(){
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var email = $.trim($('#email').val());

        $.post('validate.php', {fname:fname, lname:lname, email:email}, function(data){
            if(data != 1) {
                var obj = $('#' + data + '_msg');
                if(data == 'fname') {
                    obj.html('Invalid first name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'lname') {
                    obj.html('Invalid last name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'email') {
                    obj.html('Invalid email.').addClass('error').show().fadeOut('slow');
                }
            } else if(data == 1) {
                $('#registerform').submit();
            }
        });
    });


});
</script>
<body>
<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
   <span id="fname_msg"></span>
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
   <span id="lname_msg"></span>
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
   <span id="email_msg"></span>
  </li>
 </ul>
 <input type="button" value="Submit" id="emailbutton" />
</form>
</body>
</html>


获取更多信息
.错误{
颜色：红色；
}
$（文档）.ready（函数（）{
$（'#emailbutton'）。在（'单击'，函数（）上）{
var fname=$（'#fname'）.val（）；
var lname=$（'#lname'）.val（）；
var email=$.trim（$（'#email'）.val（））；
$.post（'validate.php'，{fname:fname，lname:lname，email:email}，函数（数据）{
如果（数据！=1）{
var obj=$（'#'+data+'#u msg'）；
如果（数据=='fname'）{
obj.html（'Invalid first name'））.addClass（'error'）.show（）.fadeOut（'slow'）；
}else if（数据=='lname'）{
obj.html（'Invalid last name'））.addClass（'error'）.show（）.fadeOut（'slow'）；
}否则如果（数据==‘电子邮件’）{
obj.html（'Invalid email'））.addClass（'error'）.show（）.fadeOut（'slow'）；
}
}else if（数据==1）{
$（'#registerform'）。提交（）；
}
});
});
});


名字


姓


电子邮件地址

validate.php

<?php 
if(isset($_POST['fname']) && isset($_POST['lname']) && isset($_POST['email'])) {

    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];

    if(validateInput($fname, 2, 25)) {
        if(validateInput($lname, 2, 30)) {
            if(validateEmail($email, 5, 150)) {
                print(1);
            } else {
                print('email');
            }
        } else {
            print('lname');
        }
    } else {
        print('fname');
    }
}
function validateInput($value, $minlength, $maxlength) {
    $valid = false;
    try {
        if (strlen(trim($value)) == 0) {
            $valid = false;
        } else if (strlen(trim($value)) < $minlength || strlen(trim($value)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}

function validateEmail($email, $minlength, $maxlength) {
    $valid = false;
    try {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $valid = false;
        } else if (strlen(trim($email)) == 0) {
            $valid = false;
        } else if (strlen(trim($email)) < $minlength || strlen(trim($email)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}
?>

<?php 
if(isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['emailbox'])) {

$fname = $_POST['first_name'];
$lname = $_POST['last_name'];
$email = $_POST['emailbox'];

echo $fname.' '.$lname.' '.$email;

// Do what you need with your data at this point, don't forget to sanitize values to insert them in your DB :-)

}
?>

谢谢。php

<?php 
if(isset($_POST['fname']) && isset($_POST['lname']) && isset($_POST['email'])) {

    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];

    if(validateInput($fname, 2, 25)) {
        if(validateInput($lname, 2, 30)) {
            if(validateEmail($email, 5, 150)) {
                print(1);
            } else {
                print('email');
            }
        } else {
            print('lname');
        }
    } else {
        print('fname');
    }
}
function validateInput($value, $minlength, $maxlength) {
    $valid = false;
    try {
        if (strlen(trim($value)) == 0) {
            $valid = false;
        } else if (strlen(trim($value)) < $minlength || strlen(trim($value)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}

function validateEmail($email, $minlength, $maxlength) {
    $valid = false;
    try {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $valid = false;
        } else if (strlen(trim($email)) == 0) {
            $valid = false;
        } else if (strlen(trim($email)) < $minlength || strlen(trim($email)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}
?>

<?php 
if(isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['emailbox'])) {

$fname = $_POST['first_name'];
$lname = $_POST['last_name'];
$email = $_POST['emailbox'];

echo $fname.' '.$lname.' '.$email;

// Do what you need with your data at this point, don't forget to sanitize values to insert them in your DB :-)

}
?>

您如何验证输入？我计划使用jquery验证插件，但尚未编写代码您为什么不使用.val（）而不是attr（'value'）？我能行。不过，仍然需要解决如何使“提交”按钮出现的问题。我可能会基于模糊度对每个字段进行验证检查，在该字段成功验证后的最后一个字段上，对所有字段进行添加检查，如果所有字段都成功，则显示按钮。解决方案很好，Nick！Chris，如果你继续这一步，请记住你将所有的验证都放在前端，所以你仍然应该在后端进行验证。否则，您可能会让用户在浏览器中更改页面的css，然后提交表单而不输入任何信息（空白和无效提交）。此外，出于同样的原因，在关闭窗口之前，您可能希望等待AJAX发回提交有效且成功完成的指示。这看起来很好，只是一个小问题——var validateEmail在某个地方有一个bug，因此它击倒了我所有的javascript！我希望自己知道如何解决这个问题，但我认为“var re=/^（（etc）”行对我来说是一门外语！我建议使用disabled=“disabled”
而不是隐藏submit按钮。正如Zachary指出的，这不会阻止用户手动删除该属性，然后提交无效表单，因此请确保执行服务器端验证。换句话说，$（“#emailbutton”）.hide（）
更改为$（“#emailbutton”）.attr（“禁用”、“禁用”）和$（“#emailbutton”）.show（）
更改为$（“#emailbutton”）.attr（“已禁用”，null）
@Chris我没有发现在代码之后丢失JavaScript会出现任何问题。