在提交时发出验证表单
Issues validating form on submit
我正在尝试在提交时验证电子邮件。现在,我有它的工作,使它验证,如果我从电子邮件标签提交按钮,也如果我直接点击提交按钮。但是,如果我在电子邮件字段内按Enter键,则不验证。此外,一旦它确认点击提交,我必须再次点击按钮来实际提交。
原因是我在提交输入中以type="button"而不是type="submit"开头。这是因为当我开始使用type="submit"时,不管电子邮件是否有效,它都会提交。
现在,我从type="button"开始,验证电子邮件,然后在有效的电子邮件中将其更改为type="submit"。然而,就像我提到的,它仍然不是最用户友好的(即使它可以正常工作)。我想添加上面描述的用户友好特性。这里是我的代码(注意:我使用Mailgun jQuery邮件验证器的验证部分):
<form accept-charset="UTF-8" id="icpsignup" name="icpsignup" action="process.php" method="post">
<p>
<input type="text" onfocus="this.value=''" onblur="this.value=!this.value?'Enter name...':this.value;" class="txtbox_index" placeholder="Enter name..." value="Enter name..." name="fields_fname" id="fields_fname">
</p>
<p>
<input type="text" class="txtbox_index" onfocus="this.value=''" onblur="this.value=!this.value?'Enter email...':this.value;" name="fields_email" id="fields_email" Value="Enter email..." placeholder="Enter email...">
<input type="text" style="border: none;color: #fff;cursor: none; background-color:transparent; height:0px;" size="1" value="<?=$country_field;?>" name="fields_country" id="fields_country">
</p>
<div id="status"></div>
<p class="forfree">
<input type="button" value="Signup For Free!" id="validate_submit" class="signupbtn_new" name="submit">
</p>
<input type="hidden" value="<?php echo $paramstring ;?>" name="fields_trk">
</form>
<script src="js/vendor/jquery.js"></script>
<script src="js/mailgun_validator.js"></script>
<script>
// document ready
$(function() {
// capture all enter and do nothing
/* $('#fields_email').keypress(function(e) {
if(e.which == 13) {
$('#fields_email').trigger('focusout');
return false;
}
});
// capture clicks on validate and do nothing
/* $("#validate_submit").click(function() {
return false;
});*/
// attach jquery plugin to validate address
$('#fields_email').mailgun_validator({
api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
in_progress: validation_in_progress,
success: validation_success,
error: validation_error,
});
});
// while the lookup is performing
function validation_in_progress() {
$('#status').html("<img src='images/loading.gif' height='16'/>");
}
// if email successfull validated
function validation_success(data) {
$('#status').html(get_suggestion_str(data['is_valid'], data['did_you_mean']));
}
// if email is invalid
function validation_error(error_message) {
$('#status').html(error_message);
}
// suggest a valid email
submitHandler: function(form) {
function get_suggestion_str(is_valid, alternate) {
if (alternate) {
form.preventDefault();
return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
} else if (is_valid) {
form.submit();
//return '<span class="success">Address is valid.</span>';
} else {
form.preventDefault();
return '<span class="error">Address is invalid.</span>';
}
}
}
//尝试使用submitthandler的另一个版本。我不确定我是否应该使用验证。:
$(function() {
$("#icpsignup").validate({
submitHandler: function('icpsignup') {
function get_suggestion_str(is_valid, alternate) {
if (alternate) {
icpsignup.preventDefault();
return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
} else if (is_valid) {
icpsignup.submit();
//return '<span class="success">Address is valid.</span>';
} else {
icpsignup.preventDefault();
return '<span class="error">Address is invalid.</span>';
}
}}
})
})
</script>
更新:更完整的答案:
: 此假设您将使用jQuery 1.4.3或更高版本当用户试图提交FORM: 时,SUBMIT事件被发送到元素。
- 只能附着在
<form>
元素上。 表单可以通过点击一个显式的:
-
<input type="submit">
, -
<input type="image">
或 -
<button type="submit">
,
或 当某些表单元素有焦点时,按进入 。
注意: *根据浏览器的不同,输入可能只在以下情况下导致表单提交:- 表单只有一个文本字段,或者
仅在有提交按钮时使用。
因此,您的代码不应该依赖于该键的特定行为,除非通过观察按键事件来强制执行该问题,因为按下Enter
键是字符代码13。- 这里是关于如何使用jQuery.com 的
- 这是一个图表比较所有ASCII字符/键码,HTML转义码,以及它们所代表的键/字符。
.keypress()
处理程序的信息
-
您可以在jQuery.com网站获得更详细的信息 .submit()
页面在这里。
在您的场景(和大多数)中,我会使用<input type="submit">
按钮和捕获SUBMIT事件。
在提交处理程序callback函数中:
$( "form#icpsignup" ).submit(function( evt ){
//...
$('#fields_email').mailgun_validator({
api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
in_progress: validation_in_progress,
success: validation_success,
error: validation_error,
});
//...
}
您将需要验证您的<form>
(即在一个或多个input
字段上使用任何代码,语句等)。然后在…
- 成功 -使用
return true
语句 - failure -使用
evt.preventDefault();
,其中evt
是传递给提交处理程序的参数。
.
下面是一个详细的例子:<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>submit demo</title> <style> p { margin: 0; color: blue; } div,p { margin-left: 10px; } span { color: red; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Type 'correct' to validate.</p> <form action="javascript:alert('success!');" <div> <input type="text"> <input type="submit"> </div> </form> <script> // "function( evt )" is an anonymous function. It *is* your handler $( "form" ).submit(function( evt ) { // evt is the *event* object. // name it whatever you'd like. if ( $( "input:first" ).val() === "correct" ) { $( "span" ).text( "Validated..." ).show(); return true; } $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 ); evt.preventDefault(); }); </script> </body> </html>
相关文章:
- JAVASCRIPT验证表单中的日期
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 如何使用jQuery正确验证表单
- Javascript不会验证表单
- 如何使用javascript验证表单中的数据,然后调用php页面
- 包括来自另一个页面的Boostrap模态;t验证表单
- Javascript验证表单不重定向页面
- 在提交之前验证表单,jQuery发布到javaScript,然后提交到确认页面
- 引导复选框-x 选中时未正确更新 DOM - 如何验证表单
- Jquery 验证表单
- 验证表单中的 jQuery-UI 微调器
- 在 Jquery 中验证表单的输入字段
- 如何验证表单控制数据大小不超过2.5 mb
- 在表单进入Angular中的ng-submit之前验证表单
- Javascript表单验证:表单在错误返回时提交:
- 使用Angular.js验证表单输入的原始状态
- 正在复制验证表单
- 如何在转盘中逐步(3步)验证表单
- 使用javascript验证表单值
- 验证表单按id输入val