logo标签列表

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

jqueryhtmlajax
4

我对jQuery还比较新，所以这可能是一个简单的问题，但是否有一种方法可以在所有字段都经过验证之前隐藏表单上的提交按钮。

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

该表单使用AJAX将表单数据输入到数据库中。 表单位于灯箱中，应在单击提交按钮后自动关闭。

您可以在此处查看示例：http://testing.xenongroupadmin.com/whatis/pfi

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

以下是表单的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>

还有 JQuery:

$(document).ready(function(){
 $("form#registerform").submit(function() {
  var fname     = $('#fname').attr('value');
  var lname     = $('#lname').attr('value');
  var email     = $('#email').attr('value');    

 $.ajax({
  type: "POST",
  url: "post.php",
  data: "fname="+ fname +"& lname="+ lname +"& email="+ email,
  success: function(){

 $('div#register-panel, div#lightbox').fadeOut(300);
   }
  });
  return false;
 });
});

谢谢！

你如何验证输入？ - Ram
我打算使用jQuery验证插件，但还没有编写代码。 - Chris
2
为什么不使用.val()而是使用attr('value')？ - Oscar Jara
可以做。不过还需要想办法让提交按钮出现。 - Chris
我会基于失焦事件，逐个字段地运行验证检查。在最后一个字段成功验证后，对所有字段运行附加检查，如果所有字段都验证成功，则显示按钮。 - chris
3个回答
6

http://jsfiddle.net/nickaknudson/KnZaq/

$(document).ready(function() {
    $('#emailbutton').hide();
    $('input').change(function(e) {
        if ($('#fname').val() && $('#lname').val() && $('#email').val() && validateEmail($('#email').val())) {
            $('#emailbutton').show();
        }
    });
});

var validateEmail = function(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
};​

更新

抱歉，在那个版本的fiddle上可能存在问题。请再试一次？ http://jsfiddle.net/nickaknudson/KnZaq/3/

资源

3
好的解决方案，尼克！ 克里斯，如果你选择这种方法，请记住你的所有验证都在前端进行，所以你仍然需要在后端验证。否则，用户可能会在其浏览器中更改页面的 CSS 并提交未输入任何信息（空白和无效提交）。此外，您可能希望等待 AJAX 提交返回指示表单已成功验证并完成后再关闭窗口，出于同样的原因。 - Zachary Kniebel
这看起来很不错，只有一个小问题——变量validateEmail的某个地方有一个错误，因此它会使我的所有JavaScript失效！我希望我知道如何自己修复这个问题，但是“var re = /^(( etc.”这一行对我来说就像外语一样！ - Chris
我建议使用 disabled="disabled" 而不是隐藏提交按钮。正如 Zachary 指出的那样，这并不能阻止用户手动删除该属性，然后提交无效表单，因此请确保进行服务端验证。 - Wex
换句话说，$('#emailbutton').hide() 会更改为 $('#emailbutton').attr("disabled", "disabled")，而 $('#emailbutton').show() 则更改为 $('#emailbutton').attr("disabled", null)。 - Wex
@Chris 我在我的代码中并没有发现丢失JavaScript的任何问题。http://jsfiddle.net/nickaknudson/KnZaq/4/ - nickaknudson
嗨，Nick，最新版本（jsfiddle.net/nickaknudson/KnZaq/4）似乎已经起作用了 - 谢谢!!! - Chris
0

我不知道你使用的是哪个验证插件，但我假设它会返回一个true/false。在你的ready处理程序中或者在css中将提交按钮的显示设置为“none”，然后在你验证完之后，使用JQuery show()方法。类似这样：

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

另一个更加用户友好的选择是显示按钮，但在表单有效之前将其禁用，然后启用它。
戴夫
0

你的表单数据并不是很大，如果你想学习新东西而不是在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>

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;
}
?>

thanks.php

<?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 :-)

}
?>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接