javascript 验证后如何显示成功消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18848810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show success message after validation
提问by Suresh Pattu
I want to valid some fields and I want to show success message $('.alert-success').show();after user entered all values.
I tried here jsfiddleNow I am able to validate all fields but I don't know how to show success message if all fields are not null.
Html:
我想验证一些字段，我想显示成功消息$('.alert-success').show(); 用户输入所有值后。
我在这里尝试过jsfiddle现在我可以验证所有字段，但如果所有字段都不为空，我不知道如何显示成功消息。
网址：
<div class="contentContainer">
<div class="alert alert-success hide">Form submitted successfully</div>
<div id="basicInfo">
<div class="toggleContentInnerSec">
<div class="row-fluid">
<div class="span7">
<label>First Name</label> <br>
<p class="hide firstNameErrorMsg error">Please enter first name</p>
<input type="text" name="borrowerBasicDetail.firstName" value="" id="addBorrowers_borrowerBasicDetail_firstName" class="access required" placeholder="Example: 'Sachin' " data-errormsg="firstNameErrorMsg"> <br>
<label>Last Name</label> <br>
<p class="hide lastNameErrorMsg error">Please enter last name</p>
<input type="text" name="borrowerBasicDetail.lastName" value="" id="addBorrowers_borrowerBasicDetail_lastName" class="access required" placeholder="Example: 'Tendulkar' " data-errormsg="lastNameErrorMsg"> <br>
<label>Date Of Birth</label> <br>
<p class="hide birthDayErrorMsg error">Please enter date of birth</p>
<input type="text" name="borrowerBasicDetail.age" value="" id="addBorrowers_borrowerBasicDetail_age" class="access required" placeholder="DD/MM/YYYY" data-errormsg="birthDayErrorMsg"> <br>
</div>
</div>
</div>
</div>
<div class="row-fluid pull-left">
<div class="form-actions">
<a class="btn btn-success btn-large" id="tabOneSubmit">Submit</a>
</div>
</div>
</div>
Script:
脚本：
submit();
function submit(){
$('#tabOneSubmit').click(function(){
$('.required').each(function(){
var element=$(this);
var elementVal=$(this).val();
var errorMsgId=element.attr('data-errorMsg');
if(elementVal==''){
$('.'+errorMsgId).show();
element.addClass('errorField');
}
else{
$('.'+errorMsgId).hide();
element.removeClass('errorField');
}
});
});
}
回答by devo
Here is the solution, just set a status variable.
这是解决方案，只需设置一个状态变量。
submit();
function submit(){
$('#tabOneSubmit').click(function(){
var status=true;
$('.required').each(function(){
var element=$(this);
var elementVal=$(this).val();
var errorMsgId=element.attr('data-errorMsg');
if(elementVal==''){
$('.'+errorMsgId).show();
element.addClass('errorField');
status=false;
}
else{
$('.'+errorMsgId).hide();
element.removeClass('errorField');
}
});
if(status) {
$('.alert-success').show();
}
});
}
回答by Purnendu Sarkar
$("#msg").html("Form was submitted");
回答by mithataydogmus
First, using validator is a good thing but I suggest you check inputs in server side too, because it's easy to hack javascript code.
首先，使用验证器是一件好事，但我建议您也检查服务器端的输入，因为它很容易破解 javascript 代码。
Secondly you need the encapsulate that your input fields via;
其次，您需要输入字段通过的封装；
<form method="POST or GET" action="foo.html"> </form>
<form method="POST or GET" action="foo.html"> </form>
Then you can use jQuery submit()method to submit via javascript:
然后你可以使用 jQuery submit()方法通过 javascript 提交：
$(form).submit(function(){
$('.alert-success').show();
event.preventDefault(); // if you want to send data only, do not reload page.
});
$(form)can be like if form has id or class: $('.myForm') , $('#myForm')
$(form)就像表单有 id 或 class 一样：$('.myForm') , $('#myForm')
