我有一个表格,带有引导程序,包含多个字段(电话号码,日期,开始时间,结束时间......),用于预订自行车。
当这些字段被更改时,脚本会检查ajax是否有自行车并且从.btn-danger(红色 - 没有自行车可用)更改按钮的类别(默认情况下作为提交)到.btn-success(绿色 - 你有一个!)因此:
<form id='resa_velo_form' name='resa_velo_form' method='POST' action='index.php?app=resa&ctrl=AccueilUserCtrl&action=enregistreResaVelo'>
<div class='form-group col-md-3'>
<label for="velo_date">Date d'emprunt : </label>
<div class='input-group date' id='datetimepicker_deb'>
<input type="text" id="velo_date" name="date_start" autocomplete="off" class="form-control" required>
<span class="input-group-addon">
<span class=" fa fa-calendar"></span>
</span>
</div>
</div>
<div class='form-group col-md-2'>
<label for="velo_time_start">Départ :</label>
<input id="velo_time_start" class="timepicker_input velo spinner" name="time_start" value="8:30" required>
</div>
<div class='form-group col-md-2'>
<label for="velo_time_end">Retour : </label>
<input id="velo_time_end" class="timepicker_input velo spinner" name="time_end" value="9:30" data-parsley-timeissup="#velo_time_start" required>
</div>
<div class='form-group col-md-5'>
<label> </label>
<button id="disponibilite_velo" class="error_resa btn btn-danger col-md-12" data-parsley-success='btn-success' required>Choisissez une date</button>
</div>
</form>
我设法使用Parsley验证此表单,甚至将.has-error类应用于表单组:
$('#resa_velo_form').parsley({
successClass: "has-success",
errorClass: "has-error",
classHandler: function(el) {
return el.$element.closest(".form-group");
}
})
我在开始和结束时间成功使用了自定义验证器:
window.Parsley.setLocale('fr');
window.Parsley.addValidator('timeissup', {
requirementType: 'string',
validateString: function(value, requirement) {
time1 = $(requirement).val().split(/:/);
time1 = time1[0] * 3600 + time1[1] * 60;
time2 = value.split(/:/);
time2 = time2[0] * 3600 + time2[1] * 60;
return (time2 > time1);
},
messages: {
en: 'This value should be higher than start time.',
fr: "Cette valeur doit être supérieure à l'heure de départ."
}
});
我尝试制作一个自定义验证器来检查按钮的类:
window.ParsleyConfig = {
excluded: 'input[type=hidden], :hidden, input[type=reset]',
inputs: 'input, textarea, select, input[type=button], button, input[type=submit]'
};
window.Parsley.addValidator('success', {
requirementType: 'string',
validateString: function(value, requirement) {
console.log('ok - Parlsey Valid Success');
return ($('#disponibilite_velo').hasClass(requirement));
},
messages: {
en: 'This button should be green !',
fr: "Ce bouton doit être vert !"
}
});
它永远不会起作用,Parlsey似乎没有使用这个验证器,但仍然检查所需的字段和“timeissup”自定义验证器。
事实上,我设法通过将它附加到输入字段来使其工作,但这不是重点。
请帮忙吗?
答案 0 :(得分:1)
让它发挥作用!
与this answer相反,您需要在表单验证器本身中定义排除和输入:
$('#resa_velo_form').parsley({
successClass: "has-success",
errorClass: "has-error",
excluded: 'input[type=reset]',
inputs: 'input, textarea, select, button',
classHandler: function(el) {
return el.$element.closest(".form-group");
}
});
其他重要的事情:即使它是一个按钮,您也需要required
属性和value
不同于&#39;&#39; (空):
<button id="disponibilite_velo" class="error_resa btn btn-danger col-md-12" data-parsley-inputsuccess='btn-success' value='*' required>Choisissez une date</button>
也许不那么干净,但......工作!