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