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

谢谢！

4

3 回答 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);
};​

更新

抱歉，那个版本的小提琴可能有问题。再试一次？ http://jsfiddle.net/nickaknudson/KnZaq/3/

资源

于 2012-07-27T15:56:47.057 回答
0

我不知道您使用的是哪个验证插件，但我认为它会返回真/假。在您准备好的处理程序中或在 css 中将提交按钮的显示设置为“无”，然后在您验证它之后，使用 JQuery show() 方法。就像是：

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

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

戴夫

于 2012-07-27T15:56:41.273 回答
0

您的表单数据不是那么大，如果您想学习新东西而不是在 javascript 端使用插件和验证，您可以手动执行某些操作（我认为）。

好吧，我更喜欢通过服务器端来验证，看看这个：

测试和工作：

索引.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>

验证.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

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

}
?>
于 2012-07-27T16:49:29.717 回答