Monday, February 26, 2024
 Popular · Latest · Hot · Upcoming
121
rated 0 times [  127] [ 6]  / answers: 1 / hits: 26218  / 11 Years ago, tue, september 17, 2013, 12:00:00



I want to valid some fields and I want to show success message $('.alert-success').show(); after user entered all values.

I tried here jsfiddle Now I am able to validate all fields but I don't know how to show success message if all fields are not null.

Html:



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

});
}

More From » jquery

 Answers
11

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

});
}


Demo


[#75650] Sunday, September 15, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
everardo

Total Points: 406
Total Questions: 104
Total Answers: 92

Location: Albania
Member since Sun, Nov 22, 2020
3 Years ago
;