Question

我正在使用带有4个标签的jquery手风琴。每个选项卡都有不同数量的文本字段和一个提交值的按钮（仅在特定的div中）。在这种情况下，我有4个选项卡内的4个按钮。每次单击按钮都应仅验证内部div中的文本字段。

需要验证：第一个和第二个标签：userid应至少为5个字符第三个选项卡：userid应至少为5个字符，密码不应该是userid的一部分第四个选项卡：所有字段都是必填项密码不应该是userid，firstname或lastname的一部分

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（）函数代码。请看上面

谢谢，素里亚

Answer 1

你可以这样做...... onClick代码中不需要input。

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

这样，您可以将id按钮的值发送到onAjaxPost（）。

在此函数中，您可以根据id值获取表单字段的值，例如使用switch()。然后，您可以构建一个数据字符串以及id值。

在远程页面上，您将获得id值，因此您可以继续进行相应的验证过程。您可以发回包括验证结果的数据。

更有用的选项是使用onBlur逐字段验证表单：

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

这一次，您可以将字段的ID及其值发送到远程验证页面，一旦用户输入，您的用户就会收到反馈。

jquery accordion - 每个标签的单独验证

1 个答案: