Question

我对Jquery相当新，所以这可能是一个简单的问题，但是有一种方法可以隐藏表单上的提交按钮，直到所有字段都经过验证。

在您键入＆＃39;时，验证需要是＆＃39;解。基本上我有3个字段 - 名字，姓氏和电子邮件。我希望提交按钮保持隐藏状态，直到这两个名称为＆＃39;字段已填写，并且已在电子邮件字段中输入有效的电子邮件地址。

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

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

忽略＆＃39;关闭此窗口＆＃39;链接 - 这只是为了我的方便，将在最终版本中删除。

下面是表单的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;
 });
});

谢谢！

Answer 1

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/

<强>资源

Validate email address in JavaScript?

Answer 2

我不知道您正在使用哪个验证插件，但我认为它会返回true / false。在您的ready处理程序或css中，将提交按钮的显示设置为“none”，然后在验证它之后，使用JQuery show（）方法。类似的东西：

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

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

戴夫

Answer 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>

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

}
?>

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

3 个答案: