Я знаю, что отладка данных - отдельная задача. Но после того, как я потратил десятки часов, пытаясь получить правильный код, я действительно понятия не имею, как это исправить.
У меня есть скрипт, который проверяет веб-форму. Демонстрация здесь
В веб-форме для большинства полей используется автозаполнение. При проверке принимаются только значения из базы данных, той же базы данных, которая используется для автозаполнения.
Когда поле как ошибка, оно становится красным.
Есть также два зависимых поля; если klas заполнено неправильно, leerling недоступен.
Пока все хорошо. Но есть пара вопросов; большинство из них представлены только в IE FF (как ни странно, не на моем Mac). Надеюсь, некоторые из вас могут помочь мне здесь.
Если поле недопустимо и вы пытаетесь исправить, вы не можете вводить более 1 символа за раз. (Все браузеры). Это делает форму непригодной для использования.
Когда поле даты помечено как недействительное, а вы выбираете дату позже, поле все еще помечается как недействительное.
Похоже, что IE и FF в Windows не проверяют on submit; Сафари на Mac делает.
Я бы очень признателен, если бы вы могли мне помочь; специально по пунктам 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>