我的问题是,当我为输入(#zip_code
设置customValidity时,它不会在我每次更新此输入时停止显示它(我在键入事件中使用它并使用{{1 }}无法解决问题)
我有这个html:
setCustomValidity('')
和此javascript:
<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" />
因此您可以看到我正在使用inputmask模块。还有一些技巧可以完全禁用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();
输入(可能无法直接关注,无法制表并且不能关注无效性),我不得不做自己的“ disabled”,因为“ disabled”属性还禁用了“ required”属性。我想我可以使用空的customValidity对其进行修补,但是我不知道如何。
答案 0 :(得分:1)
类似这样的事情...我想我忘了一些if,但是这个想法是将验证与键盘验证分开,并在表单提交时进行检查
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();