jquery accordion - separate validation for each tab

Question

I am using jquery accordion with 4 tabs. Each tab has different number of textfields and a button to submit the values (only in the particular div). In this case, i have 4buttons inside 4 tabs. Each button click should validate the textfields in the inner div only.

validation needed : 1st and 2nd tab : userid should be minimum 5characters 3rd tab : userid should be minimum 5 characters and password should not be a part of userid 4th tab : all fields are mandatory. Password should not be a part of userid, firstname or lastname

js fiddle link http://jsfiddle.net/7R3wX/2/

below is my html code

<body>
<h1>Changes in User Setup</h1>
<form>
<div id="accordion" style="font-size: 15px; vertical-align:middle;" >
<h3>Check User</h3>
<div id="checkuser">
<br> User ID : <input type="text" id="userid1">
<br> <br><input type="button" value="Submit" onclick="onAjaxPost()" id="checkButton"> <br> <br>
<div id="check" style="color: red;"></div>
</div>
<h3>Deletion of users</h3>
<div id="deleteuser">
<br> User ID : <input type="text" id="userid2">
<br> <br><input type="button" value="Submit" onclick="onAjaxPost()"id="deleteButton"> <br> <br>
<div id="delete" style="color: red;"></div>
</div>
<h3>Password Reset</h3>
<div id="passwordreset">
<br> User ID : <input type="text" id="userid3">
<br> <br> New Password : <input type="text" id="password1"> 
<br> <br><input type="button" value="Submit" onclick="onAjaxPost()" id="resetButton">
<br> <br>
<div id="reset" style="color: red;"></div>
</div>
<h3>Create User</h3>
<div id="createuser">
<br> First Name : <input type="text" id="fName" >
<br> <br> Last Name : <input type="text" id="lName">
<br><br> User ID : <input type="text" id="userid4">
<br> <br> Password : <input type="text" id="password2"> 
<br> <br><input type="button" value="Submit" onclick="onAjaxPost()" id="createButton">
<br> <br>
<div id="create" style="color: red;"></div>
</div>
</div>
</form>
</body>

below is my onajaxpost function

var user,pwd,id,fname,lname;
var urlCalled,dataPassed,divID,userTextID,pwdTextID,fnameTextID,lnameTextID,errorMsg,ifcheck;
function onAjaxPost() {
id = event.target.id;
$('#check').html("");
$('#delete').html("");
$('#create').html("");
$('#reset').html("");
if (id == "checkButton") {
divID="#check";
userTextID="#userid1";
user = $(userTextID).val();
ifcheck=user;
urlCalled="/SecuritySetup/UserCheckingConsole.service";
dataPassed="userid=" + user;
errorMsg="Input field is empty....";
}
else if (id == "deleteButton") {
divID="#delete";
userTextID="#userid2";
user = $(userTextID).val();
ifcheck=user;
urlCalled="/SecuritySetup/UserDeletionConsole.service";
dataPassed="userid=" + user;
errorMsg="Input field is empty....";
}
else if (id == "resetButton") {
divID="#reset";
userTextID="#userid3";
pwdTextID="#password1";
user = $(userTextID).val();
pwd = $(pwdTextID).val();
ifcheck=user&&pwd;
urlCalled="/SecuritySetup/UserPasswordChange.service";
dataPassed="userid=" + user+ "&password=" + pwd;
errorMsg="Please enter all fields....";
}
else if (id == "createButton") {
divID="#create";
userTextID="#userid4";
pwdTextID="#password2";
fnameTextID="#fName";
lnameTextID="#lName";
user = $(userTextID).val();
pwd = $(pwdTextID).val();
fname=$(fnameTextID).val();
lname=$(lnameTextID).val();
ifcheck=user&&pwd&&fname&&lname;
urlCalled="/SecuritySetup/UserCreationConsole.service";
dataPassed="firstName=" + fname + "&lastName=" + lname +"&userid=" + user + "&password=" + pwd;
errorMsg="Please enter all fields....";
}
if(ifcheck){
$(divID).css({
'color' : 'grey',
'font-style' : 'italic',
'font-size': '12px'
});
$(divID).html("Processing Request....");
$.ajax({
type : "POST",
url : urlCalled,
data : dataPassed,
dataType : "json",
success : function(response) {
$(divID).css({
'color' : 'green',
'font-style' : 'normal'
});
$(divID).html(response);
$(userTextID).val('');
$(pwdTextID).val('');
$(fnameTextID).val('');
$(lnameTextID).val('');
},
error : function(e) {
alert('Error: ' + e);
}
});
}
else{
$(divID).css({
'color' : 'red',
'font-style' : 'normal'
});
$(divID).html(errorMsg);
}}

How can i achieve that? Any help please? I have updated the onAjaxpost() function code also. please see above

Thanks, Suriya

What kind of validations do you wish to have? Your can add those on the button click events as each div has a separate button. — Shaunak D, May 26 '14 at 10:12
hi shaunakde, thanks for your response. i need to validate the value provided in the textbox in the selected div — Suriya Rakhunathan, May 26 '14 at 10:17
you can do that just by using ID of the `` elements. `$('#checkButton').click(function(){ console.log($('#userid1').val()); });` — Shaunak D, May 26 '14 at 10:18
i need to have 4 separate validations rite? in each validation, do i need to mention the textboxes to be validated? — Suriya Rakhunathan, May 26 '14 at 10:21
@SuriyaRakhunathan "i need to validate the value provided" - how exactly you want to validate the value..? please update the question with proper info.. — T J, May 26 '14 at 10:21

Yako · Answer 1 · 2014-05-26T10:33:31.587

You could do something like this... The onClick would not be required in the inputtags.

$(document).on('click','#accordion input[type=button]',function(){
    onAjaxPost($(this).attr('id'));
});

This way, you send the value of your id button to onAjaxPost().

In this function, you could get the values of the form fields according to the id value, for instance by using a switch(). You can then build a string of data to be sent to the distant page, together with the id value.

On the distant page, you get the id value, and you can therefore proceed to the according validation processes. You can send back data including the validation outcome.

A more usable option would be to validate your forms on a field by field basis using onBlur :

$(document).on('blur','#accordion input[type=text]',function(){
    onAjaxPost($(this).attr('id'));
});

This time you can send the field's id and its value to your distant validation page, and your user gets a feedback as soon as he leaves an input.

yako, thanks for your suggestion. i will try this and update in couple of hours. — Suriya Rakhunathan, May 26 '14 at 10:54

jquery accordion - separate validation for each tab

1 Answers1