Как мы можем удалить сообщение customValidity при keyup?

Question

Моя проблема в том, что когда я устанавливаю customValidity для входа (#zip_code), он не перестает отображать его каждый раз, когда я обновляю этот вход (я использую его в событии keyup и использую setCustomValidity('') didn 'не могу решить эту проблему)

У меня есть этот HTML:

<input type="text"  required placeholder="Nom"         name="lastname"     class="col-md-6 form-control"                                                 />
<input type="text"  required placeholder="Prénom"      name="firstname"    class="col-md-6 form-control"                                                 />
<input type="text"  required placeholder="Adresse"     name="address"      class="col-md-12 form-control"                                                />
<input type="text"  required placeholder="Code Postal" name="zip_code"     class="col-md-6 form-control"  id="zip_code" data-inputmask="'mask': '99999'" />
<input type="text"  required placeholder="Ville"       name="city"         class="col-md-6 form-control disabled"  id="city"                             />
<input type="text"  required placeholder="Téléphone"   name="phone_number" class="col-md-12 form-control" data-inputmask="'mask': '99 99 99 99 99'"      />
<input type="email" required placeholder="Email"       name="email"        class="col-md-12 form-control"                                                />

и этот JavaScript:

var zipCode = "";
$('#zip_code').keyup(function() {
    zipLength = zipCode.split('_')[0].length
    if (zipLength < 5 || zipLength == 5 && $( this ).val().split('_')[0].length != 5) {
        zipCode = $( this ).val();
        $('#city').replaceTag('<input>', true);
        $('#city').addClass('disabled');
        $('#city').focus(function(){$("#zip_code").focus();});
        $('#zip_code')[0].setCustomValidity("Veuillez renseigner un code postal valide.");
        $('#city').attr('tabindex', -1);
        $('#city').attr("placeholder", zipCode.length == 0 ? "Ville" : "Aucune ville pour ce code postal");
        $('#city').html('');
        if (zipCode.length == 5) {
            $.ajax( {
                url: "an url to a json representating every city having the zipCode",
                dataType: "json",
                method: "POST",
                data: {
                    zipCode: zipCode
                },
                success: function( data ) {
                    data.cities.map( function( x, i ) {
                        let cityName = x.name.charAt(0) + x.name.substr(1).toLowerCase().trim();
                        if (i == 0) {
                            if (data.cities.length > 1) {
                                $('#city').removeClass('disabled');
                                $('#city').replaceTag( '<select>', true );
                                $("#city").append( new Option( cityName, cityName, true ) );
                            } else {
                                $('#city').addClass('disabled');
                                $('#zip_code')[0].setCustomValidity("Veuillez renseigner un code postal valide.");
                                $('#city').focus(function(){$("#zip_code").focus();});
                                $('#city').val( cityName );
                            }
                        } else {
                            $("#city").append( new Option( cityName, cityName ) );
                        }
                    } );
                }
            } );
        }
    }
});
$(":input").inputmask();

Так что, как вы можете видеть, я использую маску вводамодуль.И некоторые приемы, чтобы полностью отключить ввод #city (без прямого фокуса, без табуляции и без фокуса на недействительность). Мне пришлось сделать свое собственное «отключено», потому что атрибут «отключен» также отключает атрибут «обязательный».Я думаю, что могу как-то исправить это, используя пустую customValidity, но я понятия не имею, как.

Answer 1

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

var zipCode = "";
$("#your-form-id").submit(function(e){
         e.preventDefault();
       zipLength = zipCode.split('_')[0].length

   if (zipLength < 5 || zipLength == 5 && $( this ).val().split('_')[0].length != 5) {
    zipCode = $( this ).val();
    $('#city').replaceTag('<input>', true);
    $('#city').addClass('disabled');
    $('#city').focus(function(){$("#zip_code").focus();});
    $('#zip_code')[0].setCustomValidity("Veuillez renseigner un code postal 
 valide.");
 $('#city').attr('tabindex', -1);
    $('#city').attr("placeholder", zipCode.length == 0 ? "Ville" : "Aucune 
ville pour 
ce code postal");
$('#city').html('');
 return false; // it make the form no submit, if postal code is wrong then the form dont submit
 }
});

$('#zip_code').keyup(function() {



    if (zipCode.length == 5) {
        $.ajax( {
            url: "an url to a json representating every city having the zipCode",
            dataType: "json",
            method: "POST",
     `enter code here`       data: {
                zipCode: zipCode
            },
            success: function( data ) {
                data.cities.map( function( x, i ) {
                    let cityName = x.name.charAt(0) + x.name.substr(1).toLowerCase().trim();
                    if (i == 0) {
                        if (data.cities.length > 1) {
                            $('#city').removeClass('disabled');
                            $('#city').replaceTag( '<select>', true );
                            $("#city").append( new Option( cityName, cityName, true ) 
);
                        } else {
                            $('#city').addClass('disabled');
                            $('#zip_code')[0].setCustomValidity("Veuillez renseigner 
un code postal valide.");
                            $('#city').focus(function(){$("#zip_code").focus();});
                            $('#city').val( cityName );
                        }
                    } else {
                        $("#city").append( new Option( cityName, cityName ) );
                    }
                } );
            }
        } );
    }
  }
 });
 $(":input").inputmask();