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

Question

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

谢谢!

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

UPDATE

对不起,这个版本的小提琴可能有些错误.再试一次？ http://jsfiddle.net/nickaknudson/KnZaq/3/

资源

• 在JavaScript中验证电子邮件地址？