这是我在 stackoverflow 上的第一个问题,请理解。
我已经做了什么
HTML。我的表单:
<form>
<div>
<label>Surname</label>
<input type="text" class="formInput" value="" name="form[surname]">
</div>
<div>
<label>Name</label>
<input type="text" class="formInput" value="" name="form[name]">
</div>
<div>
<label>Phone</label>
<input type="text" class="formInput swdt phone" value="" name="form[phone]" maxlength="16" autocomplete="off">
</div>
<div>
<label>E-mail</label>
<input type="mail" class="formInput" value="" name="form[email]">
</div>
<div>
<label>City</label>
<input type="text" class="formInput" value="" name="form[city]">
</div>
<div>
<label>Question</label>
<textarea class="formInput w100" value="" name="form[question]" type="text"></textarea>
</div>
<div>
<label>captcha</label><input type="text" class="captchaFld formInput" required="" name="form[verifyCode]">
</div>
<div>
<button class="disabled" id="submit" type="submit" disabled="">send</button>
</div>
</form>
JS. 我添加了一个必需字段的数组(这是供程序员使用的,这样他们就可以自己将所有必需的字段添加到该数组中),并且只要用户没有填写数组中的所有字段“发送”按钮被禁用。
var requiredFields = ["surname", "name", "phone", "email", "city", "verifyCode", "question"];
JS。这是我的每个函数,它遍历数组的所有元素:
$.each( requiredFields, function( i, l ) {
$(".formInput[name*='form[" + l + "]']").each(function () {
$(this).keyup(function () {
$("#submit").prop("disabled", chkAllFields());
});
});
});
JS. 这是我的函数 chkAllFields() ,它再次运行(((遍历数组的所有元素并检查字段是否为空:
function chkAllFields() {
var valid = false;
$.each( requiredFields, function( i, l ) {
$(".formInput[name*='form[" + l + "]']").each(function () {
if (valid) {
$("#submit").addClass('disabled');
if ($(".formInput[name*='form[" + l + "]']").val() == '') {
$(this).addClass('redBorder');
}
else {
$(this).removeClass('redBorder');
}
return valid;
}
else {
$("#submit").removeClass('disabled');
var input = $.trim($(this).val());
valid = !input;
}
});
});
return valid;
}
完成我需要什么
- 我需要将“redBorder”类添加到除现在已填充的字段之外的所有必填字段和空字段(当用户键入时);
- 在“模糊”方法中,当用户“取消焦点”时,必须删除任何提交的所有“redBorder”类。
目前它会出现错误(红色边框很奇怪),我不知道在哪里可以找到修复程序..
JS fiddle
这是我在 JSFIDDLE 上的代码示例
提前致谢。
最佳答案
您应该将 JavaScript
修改为:
$(document).ready(function () {
// get the validation fields
var requiredFields = ["surname", "name", "phone", "email", "city", "verifyCode", "question"];
// use a function because you want to use it 'onkeyup' and on 'focus'
var validate = function(){
$("#submit").prop("disabled", false);
$.each( requiredFields, function( i, l ) {
$(".formInput[name*='form[" + l + "]']").removeClass('redBorder');
if ($(".formInput[name*='form[" + l + "]']").val() == ""){
$("#submit").prop("disabled", true);
$(".formInput[name*='form[" + l + "]']").addClass('redBorder');
}
});
};
// bind the events. I use document in case of you add fields dynamically
$(document).on('keyup', validate);
$('input').focus(validate);
});
fiddle
关于javascript - jQuery 在将表单填充到所有必填字段(如果为空)时添加类红色边框(填充除外),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25989497/