我有一个表格,上面有姓名和电子邮件值以及验证集。
HTML:
<fieldset class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name">
<div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div>
</fieldset>
<!--name-->
<fieldset class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email" placeholder="E-mail">
<div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div>
</fieldset>
<!--email-->
<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button>
JS
var nameWarning = $(".yellow");
var emailWarning = $(".red");
$("#submitPaymentButton").prop("disabled", true);
emailWarning.hide();
nameWarning.hide();
$(document).ready(function() {
/****************************
Name validation
******************************/
$("#name").focusout(function() {
if ($(this).val().length === 0) {
$(this).parent().removeClass("has-warning");
nameWarning.hide();
validateAllInputs();
} else if ($(this).val().length < 2) {
$(this).parent().addClass("has-warning");
nameWarning.show();
}
})
/* If the user focuses in we hide the warnings, this is optional */
$("#name").focusin(function() {
$(this).parent().removeClass("has-warning");
nameWarning.hide();
});
/*******************************
E-mail fom validation
******************************/
$("#email").focusout(function() {
if ($(this).val().length === 0) {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
validateAllInputs();
console.log("hide the warnings");
} else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
console.log("hide the warnings");
} else {
$(this).parent().addClass("has-danger");
emailWarning.show();
console.log("show the warnings");
}
})
/* If we are inside the form, just hide the warnings as the user is typing.*/
$("#email").focusin(function() {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
});
这可以按预期工作,但是当我想要添加一个按钮时按下,验证两个输入,它允许提交,如果两个输入都没有警告类,那么问题就出现了,所以它们没有错误,“如果“有效,但”其他“从未被触发,我做错了什么?:
function validateAllInputs() {
if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) {
$("#submitPaymentButton").prop("disabled", false);
console.log("disabled");
} else {
$("#submitPaymentButton").prop("disabled", true);
console.log("enabled");
}
}
答案 0 :(得分:1)
试试这个......
1:我使用了焦点和模糊事件
2:您在示例
中缺少以下条件下的validateAllInputs()调用 else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
console.log("hide the warnings");
var nameWarning = $(".yellow");
var emailWarning = $(".red");
$("#submitPaymentButton").prop("disabled", true);
emailWarning.hide();
nameWarning.hide();
$(document).ready(function() {
/****************************
Name validation
******************************/
$("#name").on("blur",function() {
if ($(this).val().length === 0) {
$(this).parent().removeClass("has-warning");
nameWarning.hide();
validateAllInputs();
}
else if ($(this).val().length < 2) {
$(this).parent().addClass("has-warning");
nameWarning.show();
}
})
/* If the user focuses in we hide the warnings, this is optional */
$("#name").on("focus",function() {
$(this).parent().removeClass("has-warning");
nameWarning.hide();
});
/*******************************
E-mail fom validation
******************************/
$("#email").on("blur", function() {
if ($(this).val().length === 0) {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
validateAllInputs();
console.log("hide the warnings");
} else if ($(this).val().length > 1 && $(this).val().indexOf("@") > -1) {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
validateAllInputs();
console.log("hide the warnings");
} else {
$(this).parent().addClass("has-danger");
emailWarning.show();
console.log("show the warnings");
}
})
/* If we are inside the form, just hide the warnings as the user is typing.*/
$("#email").on("focus",function() {
$(this).parent().removeClass("has-danger");
emailWarning.hide();
});
});
function validateAllInputs() {
if (!$("#name").parent().hasClass("has-warning") && !$("#email").parent().hasClass("has-danger")) {
$("#submitPaymentButton").prop("disabled", false);
console.log("disabled");
} else {
$("#submitPaymentButton").prop("disabled", true);
console.log("enabled")
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name">
<div class="form-control-feedback yellow"> Please, make sure that the name is at least 2 charactes long. </div>
</fieldset>
<!--name-->
<fieldset class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email" placeholder="E-mail">
<div class="form-control-feedback red">Please make sure the e-mail includes an "@". </div>
</fieldset>
<!--email-->
<button type="submit" class="btn btn-primary btn-lg mt-3" id="submitPaymentButton"> Process Payment </button>