проверка поля изменения проверки jquery на лету

Question

Я использую проверку JQuery, и у меня есть код выше

    <script language="javascript">

$(document).ready(function() {


    var validator=$("form#myForm")
        .validate({
            submitHandler: function(form){ 
            alert("Submited");
            },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                  console.log(validator.invalidElements());
                }
              },
            rules: {
                       field1: { required: true }            
                    }
    });    

})

function changeValidation()
{
        var validationType=$("#nextFieldValidation").val();

        console.log("selected validation type is "+validationType);

        switch(validationType)
        {
            case "integer":
                console.log("set INTEGER validation");
                $("#nextField").rules("remove");
                $("#nextField").rules("add", {
                        digits: true
                    });
            break;
            case "float":
                console.log("set FLOAT validation");
                $("#nextField").rules("remove");
                $("#nextField").rules("add", {
                        number: true
                    });
            break;
            default:
                console.log("REMOVE validation");
                $("#nextField").rules("remove");
            break;
        }
}
</script>


<form id="myForm" name="form" action="action.php">
    <div><input type="text" name="field1" id="field1" /></div>

    <div>
        <select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();">
            <option value="">Select next filed validation</option>
            <option value="integer">Integer</option>
            <option value="float">Float</option>
        </select>
    </div>

    <div><input type="text" name="nextField" id="nextField" /></div>

    <div><input type="submit" /></div>

</form>

Проверка NextField контролируется полем выбора.Пользователь решает, является ли nextField целым числом или числом с плавающей запятой.

Код работает нормально, но мне нужно что-то добавить, чтобы повысить доступность для пользователя.

Так вот в чем проблема.

Сценарий:

пользователь заполняет поле1, выбирает целочисленную проверку и заполняет 12,8 и нажимает кнопку отправки. Он получает ошибку «Пожалуйста, введите только цифры».это правильно

После этого измените валидацию на float.

Вот проблема.ошибка "Пожалуйста, введите только цифры."все еще там, и это немного сбивает с толку. Вы должны отправить форму, чтобы продолжить, но почему кто-то нажимает кнопку «Отправить», когда появляется сообщение об ошибке.

Так есть ли способ, когда при изменении значения поля выбора каким-либо образом повторная проверка формы или только повторная проверка толькоконкретный nextFiled для того, чтобы убрать ошибку

Спасибо

Answer 1

Я предлагаю вам изменить вызов на "changeValidation ()", чтобы он происходил при замене, а не при нажатии. Вероятно, onclick срабатывает, когда вы щелкаете по элементу управления, чтобы выделить его, а не когда вы выбираете другую опцию. В результате, во время выполнения проверки он все еще задается как целое число.

Итак, попробуйте изменить:

<select name="nextFieldValidation" id="nextFieldValidation" onclick="changeValidation();">

Кому:

<select name="nextFieldValidation" id="nextFieldValidation" onchange="changeValidation();">