Parsley.js提交表单不使用addAsyncValidator和远程工作时， [英] Parsley.js Submit form not working when using addAsyncValidator and remote
问题描述
我有一个登记表拆分成使用的基础上，从网站的例子之一这code正常使用块：
$（'。寄存器下一个'）。在（'点击'，函数（）{
无功电流= $（本）的.data（'currentBlock），
接下来= $（本）的.data（'nextBlock'）;
的console.log（'当前块='+电流）;
的console.log（下一个块='+次）;
//只有验证前进。如果当前组是无效的，不走的更远
// .parsley（）。验证（）返回验证结果，并显示错误
如果（下一个＆GT;电流）
如果（假=== $（'＃形式登记）。香菜（）。验证（块+电流））
返回;
//验证是确定的。我们可以继续下一步。
$（'块'+电流）
.removeClass（'秀'）
.addClass（隐藏）;
$（'块'+次）
.removeClass（隐藏）
.addClass（'秀'）;
}）;
我当时就想一个额外的AJAX验证增加的code中的最后一块，以确保是不是已经采取了用户名。我有检查工作，但问题是，当验证检查都通过了形式现在不能提交。点击提交按钮只需再次调用远程函数。
我假设，我不得不重新分配提交按钮，一旦所有的验证检查都已经取得了各项功能？
该ID的用户名涉及输入域在我的形式的最后一块。
感谢
$（'＃用户名）。香菜（）。addAsyncValidator（
validateUsername'，函数（XHR）{
。VAR用户登陆= $（'＃用户名），香菜（）;
window.ParsleyUI.removeError（用户登陆，'errorUsername'）;
如果（xhr.status =='200'）{
的console.log（在200）;
返回;
}
如果（xhr.status =='404'）{
响应= $ .parseJSON（xhr.responseText）;
的console.log（用户名存在）;
window.ParsleyUI.addError（用户登陆，'errorUsername，response.error）;
}
}，INC / check_username.php
）;
我终于得到了这个工作。有可能是一个更容易的方式来做到这一点，但这个工程。
首先，我犯了一个错误与我的code，我需要返回true，如果状态为200
$（'＃用户名）。香菜（）。addAsyncValidator（
validateUsername'，函数（XHR）{
。VAR用户登陆= $（'＃用户名），香菜（）;
window.ParsleyUI.removeError（用户登陆，'errorUsername'）;
如果（xhr.status =='200'）{
返回true;
}
如果（xhr.status =='404'）{
响应= $ .parseJSON（xhr.responseText）;
的console.log（用户名存在）;
window.ParsleyUI.addError（用户登陆，'errorUsername，response.error）;
}
}，INC / check_username.php
）;
然后添加一个额外的一块code监听提交按钮被点击，并使用JavaScript来提交之前删除从表单香菜验证
$（'＃新用户提交）。点击（函数（）{
$（'＃形式登记）。香菜（）。asyncValidate（）
.done（函数（）{
。$（'＃形式登记），香菜（）destroy（）方法;
$（'＃形式注册）提交（）。 }）;
}）;
我不是JavaScript的一个大用户，因此一般需要我，而通过这些东西来工作，我的方式，但我认为香菜是如此受欢迎，会有它更好的支持和文档。
I have a registration form split into blocks that was working perfectly using this code based on one of the examples from the website:
$('.register-next').on('click', function () {
var current = $(this).data('currentBlock'),
next = $(this).data('nextBlock');
console.log('current block = ' + current);
console.log('next block = ' + next);
// only validate going forward. If current group is invalid, do not go further
// .parsley().validate() returns validation result AND show errors
if (next > current)
if (false === $('#form-register').parsley().validate('block' + current))
return;
// validation was ok. We can go on next step.
$('.block' + current)
.removeClass('show')
.addClass('hidden');
$('.block' + next)
.removeClass('hidden')
.addClass('show');
});
I then wanted to add an additional ajax validation to the last block of the code to make sure that the username was not already taken. I have the check working but the problems is that the form will now not submit when the validation checks are passed. Clicking on the submit button just calls the remote function again.
I am assuming that I have to reassign the function of the submit button once all validation checks have been made?
The ID username relates to the input field in the last block of my form.
Thanks
$('#username').parsley().addAsyncValidator(
'validateUsername', function (xhr) {
var UserLogin = $('#username').parsley();
window.ParsleyUI.removeError(UserLogin,'errorUsername');
if(xhr.status == '200'){
console.log("in 200");
return;
}
if(xhr.status == '404'){
response = $.parseJSON(xhr.responseText);
console.log("username exists");
window.ParsleyUI.addError(UserLogin,'errorUsername',response.error);
}
}, 'inc/check_username.php'
);
I finally got this working. There is probably a far easier way to do it but this works.
firstly, I made one mistake with my code, I needed to return true if the status was 200
$('#username').parsley().addAsyncValidator(
'validateUsername', function (xhr) {
var UserLogin = $('#username').parsley();
window.ParsleyUI.removeError(UserLogin,'errorUsername');
if(xhr.status == '200'){
return true;
}
if(xhr.status == '404'){
response = $.parseJSON(xhr.responseText);
console.log("username exists");
window.ParsleyUI.addError(UserLogin,'errorUsername',response.error);
}
}, 'inc/check_username.php'
);
I then added an additional piece of code to listen for the submit button to be clicked and remove parsley validation from the form before using javascript to submit
$('#new-user-submit').click(function(){
$('#form-register').parsley().asyncValidate()
.done(function(){
$('#form-register').parsley().destroy();
$('#form-register').submit(); });
});
I'm not a big user of javascript so it normally takes me a while to work my way through these things but I thought with parsley being so popular there would be far better support and documentation for it.
这篇关于Parsley.js提交表单不使用addAsyncValidator和远程工作时，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
