使用 javascript make 字段的表单是必需的吗？

Question

我有一个使用 javascript 文件 items.js 来添加新项目的表单。因此，每次使用 form.php 并单击“添加项目”按钮时，都会显示新的字段行以添加详细信息。

所以例如下面的一些代码来添加字段项名称。

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" />';

如何编辑此.js 文件以使项目名称字段成为必填项？

任何帮助将不胜感激。

Answer 1

Per Jeevan：由于您无法确定用户提交了多少项目，我会选择一种方法，让所有新项目都具有唯一的类，例如 dynamicAddedItems。

正如 Jeevan 已经说过的，您可以在表单标签中添加以下内容，以防止它在返回 false 时提交。

<form onsubmit="return validate();"></form>

使用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;
}

如果字段为空，此脚本将添加错误类并阻止提交表单。如何显示具有此类的字段由您决定。

Answer 2

您可以为此使用 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;
}

这是一个工作小提琴。它还将焦点放在验证警报之后的第一个未填充字段：

http://jsfiddle.net/YG6mk/2/