Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 按钮上的欧芹验证+;自定义验证器不工作_Javascript_Jquery_Parsley.js - Fatal编程技术网

Javascript 按钮上的欧芹验证+;自定义验证器不工作

Javascript 按钮上的欧芹验证+;自定义验证器不工作,javascript,jquery,parsley.js,Javascript,Jquery,Parsley.js,我有一个样式为bootstrap的表单,它包含多个字段(电话号码、日期、开始时间、结束时间……),用于预订自行车。 更改这些字段后,脚本将通过ajax检查自行车是否空闲,并相应地将按钮的类别(默认情况下充当提交)从.btn danger(红色-无自行车可用)更改为.btn success(绿色-您得到了一个!): <form id='resa_velo_form' name='resa_velo_form' method='POST' action='index.php?app=resa&

我有一个样式为bootstrap的表单,它包含多个字段(电话号码、日期、开始时间、结束时间……),用于预订自行车。
更改这些字段后,脚本将通过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>&nbsp;</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>
我正在开始和结束时间成功使用自定义验证器:

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”自定义验证器

事实上,我通过将它附加到一个输入字段来使它工作,但这不是重点

有什么帮助吗?

开始工作了

与此相反,您需要在表单验证程序本身中定义排除和输入:

$('#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
属性和与“”不同的
值(空):

Choisissez une日期

也许不是很干净,但是。。。工作

由于您将自己的函数命名为“success”,欧芹已经在其自己的函数中使用了“data parsley success”,因此这里可能存在措辞问题。试着给验证器起另一个名字(只是为了测试),比如“myValidator”,然后像“data parsley my validator”(你需要在每个驼峰字母前加一个)一样弹劾它,这是一个很好的检查点,但是没有。我试着更改了名称,但没有起作用。我甚至在一个输入字段上尝试了“成功”,它确实起了作用。这就像欧芹不会验证按钮元素,尽管将其添加到列表中。
$('#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");
    }
});
<button id="disponibilite_velo" class="error_resa btn btn-danger col-md-12" data-parsley-inputsuccess='btn-success' value='*' required>Choisissez une date</button>