问题描述
我是相当新的jQuery的，所以这可能是一个简单的问题，而是有没有办法隐藏提交表单上的按钮，直到所有的领域都得到了验证。
I'm fairly new to Jquery, so this might be a simple problem, but is there a way to hide the submit button on a form until all the fields have been validated.
验证将需要一个在您输入的解决方案。基本上我有3场 - 姓，名和电子邮件。我想提交按钮留下隐患，直到两个名称字段已被填充和一个有效的E-mail地址已进入电子邮件领域。
The validation would need to be an 'as you type' solution. Basically I have 3 fields - first name, last name and e-mail. I'd like the submit button to stay hidden until the two 'name' fields have been filled in and a valid e-mail address has been entered into the e-mail field.
窗体本身使用AJAX来输入表单数据到数据库中。该表格是应该自动关闭，一旦点击该按钮提交一个收藏夹。
The form itself uses AJAX to input the form data into a database. The form is in a lightbox which should automatically close once the submit button is clicked.
您可以看到一个例子在这里： http://testing.xenongroupadmin.com/whatis/pfi
You can see an example here: http://testing.xenongroupadmin.com/whatis/pfi
忽略了关闭此窗口链接 - 这还只是存在于我的便利，将在最终版本中被删除
下面是HTML code的形式，随后的JQuery / AJAX提交code：
Below is the HTML code for the form, followed by the JQuery/AJAX submission code:
<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>
$(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/
Sorry, it may have been buggy on that version of the fiddle. Try again?http://jsfiddle.net/nickaknudson/KnZaq/3/
资源
这篇关于隐藏提交按钮，直到形式是有效的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！