Parsley是否有一种简单的方法可以在禁用提交按钮的情况下加载表单,并启用它以满足表单的所有验证要求?
答案 0 :(得分:3)
我不确定你所说的“简单”是什么意思,但是你可以完成什么。
您需要listen to the events parsley:form:success
和parsley:form:error
来启用/禁用该按钮。
您还需要监控每个表单字段的更改,以强制Parsley进行验证。一旦您点击submit
,Parsley就会执行验证。由于禁用了提交,您需要手动触发验证。
所以,这是一个有效的例子(jsfiddle):
<form>
<input type="text" name="field" data-parsley-required />
<button type="submit" disabled>Submit</button>
</form>
<script>
$(document).ready(function() {
// bind Parsley to the form
$("form").parsley();
// Whenever parsley validates successfully, we enable the submit button
$.listen('parsley:form:success', function(ParsleyForm) {
ParsleyForm.$element.find('button').prop('disabled', false);
});
// When a validation error occurs, we disable the submit button
$.listen('parsley:form:error', function(ParsleyForm) {
ParsleyForm.$element.find('button').prop('disabled', true);
});
// We need to monitor all form fields and force Parsley's validation manually
// This will result in enabling or disabling the submit button
$("form :input").change(function() {
$(this).closest('form').parsley().validate();
});
});
</script>
请注意,您需要让您监控所有字段(输入,选择,文本等)的更改。
答案 1 :(得分:0)
可以使用下面的代码,它会在禁用提交按钮的情况下加载表单,并在满足表单的某些验证要求时启用它:
function formValidation(oEvent) {
oEvent = oEvent || window.event;
var txtField = oEvent.target || oEvent.srcElement;
var t1ck = true; //Enter Text Field ID/Name in place of 't1'
var msg = " ";
if(document.getElementById("t1").value.length < 3 ) {
t1ck = false;
msg = msg + "Text Entered should be minimun 3 char length";
}
//Enter Text Field ID/Name in place of 't1'
if(document.getElementById("s1").value.length < 1 ) {
t1ck = false;
msg = msg + " Select one of the options";
}
//Enter Select Field ID/Name in place of 's1'
if(t1ck) {
document.getElementById("btnSignUp").disabled = false;
}
//Enter submit button ID/Name in place of 'btnSignUp'
else{
document.getElementById("btnSignUp").disabled = true;
}
}
function resetForm() {
document.getElementById("btnSignUp").disabled = true;
var frmMain = document.forms[0];
frmMain.reset();
}
window.onload = function () {
var btnSignUp = document.getElementById("btnSignUp");
var btnReset = document.getElementById("btnReset"); //Enter reset button ID/Name in place of 'btnReset'
var t1 = document.getElementById("t1");
var s1 = document.getElementById("s1");
var t1ck = false;
document.getElementById("btnSignUp").disabled = true;
t1.onkeyup = formValidation;
s1.onclick = formValidation;
btnReset.onclick = resetForm;
}