Question

我知道dat调试是一项独立的任务。但是，在花了几十个小时试图让代码完全正确之后，我真的不知道如何修复它。

我有一个验证webform的脚本。 Live demo here

网络表单对大多数字段使用自动填充功能。在验证中，仅接受数据库中的值，即用于自动完成的相同数据库。当一个字段作为错误时，它变为红色。还有两个依赖领域;如果未正确填写klas，则无法访问leerling。

到目前为止一切顺利。但是有几个问题;他们中的大多数只出现在FF的IE中（奇怪的是不在我的Mac上）。希望你们中的一些人可以帮助我。

如果字段无效，并且您尝试更正，则一次不能输入多于1个字符。（所有浏览器）。这使得表单无法使用。
当日期字段标记为无效且您之后选择日期时，该字段仍标记为无效。
看起来Windows上的IE和FF不验证on submit;在Mac上的safari。

如果你能帮助我，我真的很感激;特别是在第1点和第3点。

脚本是这样的：

<script type="text/javascript">
$(document).ready(function() {
    $("#newAp").validate({               
        validClass: 'succes',
        ignore: '#opmerking',
        errorContainer: '#newap-error',
        highlight: function(element, errorClass) {
            $(element).removeAttr("disabled");
            $("#" + $(element).attr("data-dependency")).attr("disabled", "disabled");
            $("#ll-naamErrorLabel").show();
            $(element).addClass(errorClass);
        },
        unhighlight: function(element, errorClass) {
            $(element).removeClass(errorClass);
            $("#" + $(element).attr("data-dependency")).removeAttr("disabled");
            $("#ll-naamErrorLabel").hide();
            $("#ll-naam").focus();
        },
        rules: {
            docent: {
                required: true,
                minlength: 4,
                remote: "handlers/validationInSqlArray.php"
            },
            'vak': {
                required: true,
                remote: "handlers/validationInSqlArray.php"
            },
            'klas': {
                required: true,
                remote: "handlers/validationInSqlArray.php",
            },
            'll-naam': {
                required: true
            },
            'datum': {
                required: true
            }
        },
        messages: {
            docent: {
                required: "Vul uw achternaam in",
                remote: "Alleen namen uit de suggestielijst zijn toegestaan",
                minlength: jQuery.validator.format("Vul minimaal {0} tekens in."),
            },
            vak:  {
                required: "U dient een vak in te vullen",
                remote: "Alleen vakken uit de suggestielijst zijn toegestaan",
            },
            klas: {
                required: "Vul een klas in",
                remote: "Alleen klassen uit de suggestielijst zijn toegestaan"
            },
            'll-naam': "Voer de naam van de leerling in",
            datum: "Selecteer een terugkomdatum"
        }

    });

    $('input, textarea').placeholder({
        blankSubmit:true
    });


    $( "#docent" ).autocomplete({
        source: "handlers/autocompleteDocent.php",
        autoFill: true,
        matchCase: true
    });

    $( "#vak" ).autocomplete({
        source: "handlers/autocompleteVak.php",
        autoFill: true,
        matchCase: true
    });
    $( "#klas" ).autocomplete({
        source: "handlers/autocompleteStamgroep.php",
        autoFill: true,
        matchCase: true
    });
    $('#ll-naam').focus(function(){
        var url = 'handlers/autocompleteLeerling.php?stamgroep='+document.getElementById('klas').value;
        $(this).autocomplete('destroy');
        $(this).autocomplete({
            source: url,
            autoFill: true,
            matchCase: true
        });
    })

    $( "#datum" ).datepicker({
        showWeek: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        showOn: "both",
        buttonImage: "style/images/icon_calendar.png",
        buttonImageOnly: true,
        monthNames: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
        dayNamesMin: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
        dateFormat: 'dd-mm-yy',
        beforeShowDay: noWeekendsOrBlockDay
    });

    $('#newap-error').hide();
    $("#submit-succes").delay(6000).fadeOut(1000);
});

</script>

形式：

<form method="post" action="" id="newAp" class="form">
        <div class="alert alert-error" id="newap-error">
            <p>Corrigeer de rood gemarkeerde velden</p>
        </div>
        <h2 class="form-title">Leerling aanmelden</h2>
        <label for="docent">Docent</label>
        <input type="text" name="docent" id="docent" placeholder="Vul uw achternaam in"/>

        <label for="vak">Vak</label>
        <input type="text" name="vak" id="vak" placeholder="Vul de naam van het vak in"  />

        <label for="klas">Klas (stamgroep)</label>
        <input type="text" name="klas" id="klas" placeholder="Klas van de leerling" value="" data-dependency="ll-naam" />

        <label for="ll-naam">Leerling</label>
        <input type="text" name="ll-naam" id="ll-naam" placeholder="Naam van de leerling" disabled data-dependency="klas" />
        <label class="error" id="ll-naamErrorLabel">Vul eerst de klas in</label>

        <label for="opmerking">Opmerking</label>
        <textarea name="opmerking" name="opmerking" placeholder="Opmerking voor de surveillant."> </textarea>
        <input type="hidden" name="opmerking_ph" value="Opmerking voor de surveillant." />

        <label for="date">Terugkom datum</label>
        <input type="text" name="datum" id="datum" readonly='true' placeholder="Klik om datum te selecteren" />

        <input type="submit" class="submit" value="Opslaan" />

    </form>

Answer 1

这不是解决方案。据我所知，或者我如何看待它，所有这些错误都与jquery.validate的工作方式有关。

我只是快速浏览一下插件，我无法确定出现了什么问题，但我发现你的实现与例如http://www.codeproject.com/KB/ajax/jQueryValidateExample.aspx上的示例之间存在显着差异。

我有几个问题，如果没有做更多研究，你可能比我更容易回答（关于这个插件的文档是相当有限的）：

1）验证实际上是如何/何时启动的？（因为atm，在自动完成之前会进行验证，逻辑上会返回不必要的错误。）

2）高亮/不高亮选项有什么作用？由于我找不到支持这些选项的任何版本的验证插件，我只是想知道。

我怀疑验证插件有点过时和错误。实施也可能是问题所在。如我错了请纠正我：）。让我们看看答案是否能让我更进一步。

干杯

jQuery验证：live和ajax val无法正常工作

1 个答案: