表单使用 javascript make 字段是必需的吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17380661/
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
Form using javascript make field required?
提问by nrider
I have a form that uses a javascript file items.jsto add new items. So each time form.phpis used and the 'add items' buttons is clicked then the new row of fields show to add details.
我有一个使用 javascript 文件items.js添加新项目的表单。因此，每次form.php使用并单击“添加项目”按钮，然后显示新的字段行以添加详细信息。
So for example some of the code is the following to add field item name.
因此，例如一些代码如下添加字段项目名称。
newCell = newRow.insertCell(3);
newCell.innerHTML = '<input class="item_text_area item_name" type="text" name="0_item_' + new_item + '" id="0_item_' + new_items + '" size="20" maxlength="250" />';
How can I edit this .jsfile to make the Item name field required?
如何编辑此.js文件以使项目名称字段成为必需？
Any help would be appreciated.
任何帮助，将不胜感激。
回答by Sumurai8
Per Jeevan: As you cannot be sure how many items the user submits, I would choose for an approach where all new items have unique class, say dynamicAddedItems.
Per Jeevan：由于您无法确定用户提交了多少项，我会选择一种所有新项都具有唯一类的方法，例如dynamicAddedItems。
As Jeevan already said, you can add the following to the form tag to prevent it from submitting if it returns false.
正如 Jeevan 已经说过的，您可以将以下内容添加到表单标签中，以防止它在返回false.
<form onsubmit="return validate();"></form>
With javascript:
使用 JavaScript：
function validate(){
var elems = document.getElementsByClassName( 'dynamicAddedItems' );
var allgood = true;
//Loop through all elements with this class
for( var i = 0; i < elems.length; i++ ) {
if( !elems[i].value || !elems[i].value.length ) {
elems[i].className += " error";
allgood = false;
} else {
elems[i].className = "item_text_area item_name dynamicAddedItems";
}
}
//If any element did not meet the requirements, prevent it from being submitted and display an alert
if( !allgood ) {
alert( "Please fill in all the required fields." );
return false;
}
//Otherwise submit the form
return true;
}
This script will add the error class if a field is empty and prevent the form from being submitted. It's up to you how you want to display a field with such a class.
如果字段为空，此脚本将添加错误类并阻止提交表单。您希望如何显示具有此类类的字段取决于您。
回答by reggaemahn
You can use jquery for this. Add a class, in this case 'requiredAttr' to the required fields and then validate on form submit.
您可以为此使用 jquery。添加一个类，在本例中为“requiredAttr”到必填字段，然后在表单提交时进行验证。
<form onsubmit="return validate();">
First Name*: <input class="requiredAttr" type="text" /><br/>
Last Name: <input type="text" /><br/>
<input type="submit" />
</form>
function validate(){
$(".requiredAttr").each(function(){
if($(this).val().length < 1){
alert("please fill in all the required fields.");
$(this).focus();
return false;
}
else{
return true;
}
});
return false;
}
Here is a working fiddle. It also brings the focus on the first un-filled field after the validation alert:
这是一个工作小提琴。它还将重点放在验证警报之后的第一个未填充的字段上：
