对必填字段的 Javascript / Jquery 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19116306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript / Jquery Validation on required fields
提问by Ducaz035
I searched a lot but couldn't find an answer for my question. Firstly, i would like to have a submit button which will be disable if all the required fields are not filled. I found some example if all the fields are filled but i have required and not required ones So, I need to find if the required ones are filled or not. I am currently out of ideas of how to make it happen. Just in case , i am using play framework 2.1.x with Scala.
我搜索了很多，但找不到我的问题的答案。首先，我想要一个提交按钮，如果未填写所有必填字段，该按钮将被禁用。我找到了一些示例，如果所有字段都已填写，但我有必填字段和非必填字段，因此，我需要查找是否填写了必填字段。我目前不知道如何实现它。以防万一，我正在使用带有 Scala 的播放框架 2.1.x。
Cheers, Ilgün
干杯，伊尔金
回答by Bradley Trager
Here is a simple example:
这是一个简单的例子：
First you can identify the required fields with a class of required:
首先，您可以使用必填类来识别必填字段：
<form id="myForm">
*<input type="text" class="required" /></br>
*<input type="text" class="required" /></br>
<input type="text" /></br>
<input type="text" /></br>
<input type="submit"/>
</form>
Initially disable your submit button:
最初禁用您的提交按钮：
var submitButton = $("#myForm input[type='submit']").attr("disabled", true);
Then use jQuery to loop through your inputs everytime one changes, and check if there are values in them. If they all have a value then enable the submit button, if not disable it:
然后每次更改时使用 jQuery 循环遍历您的输入，并检查其中是否有值。如果他们都有一个值然后启用提交按钮，如果没有禁用它：
$("#myForm input.required").change(function () {
var valid = true;
$.each($("#myForm input.required"), function (index, value) {
if(!$(value).val()){
valid = false;
}
});
if(valid){
$(submitButton).attr("disabled", false);
}
else{
$(submitButton).attr("disabled", true);
}
});
Please see this jsFiddlewith a simple example of what you are describing using jQuery.
请参阅此jsFiddle以及您使用 jQuery 描述的简单示例。
回答by naloxx
This is just some basic stuff with plain HTML/JS to show a possible way of input validation:
这只是一些带有纯 HTML/JS 的基本内容，用于显示一种可能的输入验证方式：
HTML:
HTML：
<html>
<form id="form">
<input class="form-input" data-required="true" type="text" />
<input class="form-input" data-required="true" type="text" />
<input class="form-input" data-required="false" type="text" />
<input class="form-input" data-required="false" type="text" />
<input id="form-submit" type="submit" disabled />
</form>
</html>
JS:
JS：
$(document).ready(function() {
// on input change:
$(".form-input").on('change', function() {
// hide the input (not neccessary)
$("#form-submit").hide();
// enable it
$("#form-submit").removeProp("disabled");
// check all inputs
$.each(".form-input", function() {
// read element values
var required = $(this).data("required");
var empty = ($(this).val() == "" || $(this).val() == null)
// if element is required but empty:
if (required && empty) {
// disable submit button
$("#form-submit").prop("disabled", "disabled");
}
}
// now the submit button is enabled if all required inputs are filled
// and it is disabled if at least one required input is empty
// after hiding it: make the button visible again (not neccessary)
$("#form-submit").show();
}
});
回答by Ducaz035
I have been trying to use your solution,
我一直在尝试使用您的解决方案，
this is my input :
这是我的输入：
<input class="required" placeholder="Required Field" required="true" name="tracktitle" type="text">
However the button is not turning to enabled state.
但是，该按钮并未变为启用状态。
JS:
JS：
<script>
$(function () {
var submitButton = $("#myForm input[type='submit']").attr("disabled", true);
$("#myForm input.required").change(function () {
var valid = true;
$.each($("#myForm input.required"), function (index, value) {
alert("comes here");
if(!$(value).val()){
valid = false;
}
});
if(valid){
$(submitButton).attr("disabled", false);
console.log("valid");
alert("valid");
}
else{
$(submitButton).attr("disabled", true);
}
});
});
</script>
My submit Button:
我的提交按钮：
<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />
