jquery accordion - отдельная проверка для каждой вкладки

Я использую jquery гармошку с 4 вкладками. Каждая вкладка имеет различное количество текстовых полей и кнопку для отправки значений (только в конкретном div). В этом случае у меня есть 4 кнопки внутри 4 вкладок. Каждое нажатие кнопки должно проверять текстовые поля только во внутреннем div.

требуется проверка: 1-я и 2-я вкладка: идентификатор пользователя должен быть не менее 5 символов 3-я вкладка: идентификатор пользователя должен быть не менее 5 символов, а пароль не должен быть частью 4-й вкладки идентификатора пользователя: все поля являются обязательными. Пароль не должен быть частью идентификатора пользователя, имени или фамилии

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

ниже мой HTML-код

<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>

ниже моя функция onajaxpost

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

Как я могу этого достичь? Любая помощь, пожалуйста? Я также обновил код функции onAjaxpost(). пожалуйста, смотрите выше

Спасибо сурия

Источник

1 ответ

Вы могли бы сделать что-то вроде этого... onClick не потребуется в inputтеги.

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

Таким образом, вы отправляете значение своей кнопки id в onAjaxPost().

В этой функции вы можете получить значения полей формы в соответствии со значением id, например, используя switch(), Затем вы можете создать строку данных для отправки на удаленную страницу вместе со значением id.

На удаленной странице вы получаете значение идентификатора, и поэтому вы можете перейти к соответствующим процессам проверки. Вы можете отправить обратно данные, включая результаты проверки.

Более удобным вариантом будет проверка ваших форм по полям с использованием onBlur:

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

На этот раз вы можете отправить идентификатор поля и его значение на страницу удаленной проверки, и ваш пользователь получит отзыв, как только он покинет вход.

Источник
Другие вопросы по тегам