I have a form that uses a javascript file items.js to add new items. So each time form.php is used and the 'add items' buttons is clicked then the new row of fields show to add details.

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 .js file to make the Item name field required?

Any help would be appreciated.

I have a form that uses a javascript file items.js to add new items. So each time form.php is used and the 'add items' buttons is clicked then the new row of fields show to add details.

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 .js file to make the Item name field required?

Any help would be appreciated.

• javascript
• html
• forms
• validation

Share Improve this question Follow edited Jun 29, 2013 at 13:45 Yotam Omer 15.4k1111 gold badges6464 silver badges6565 bronze badges asked Jun 29, 2013 at 13:23 nridernrider 11711 gold badge22 silver badges1515 bronze badges 2

• Do you want to add some sort of alert or just want to indicate the user that it is a required field? – reggaemahn Commented Jun 29, 2013 at 13:27
• For the rest of the form that isn't using the items.js I can just add class="blah required" and it will stop the form being submitted while letting the user know that the certain field is required. I would like the .js portion of the form to act the same. – nrider Commented Jun 29, 2013 at 13:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.

As Jeevan already said, you can add the following to the form tag to prevent it from submitting if it returns false.

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

With 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.

You can use jquery for this. Add a class, in this case 'requiredAttr' to the required fields and then validate on form submit.

<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:

http://jsfiddle/YG6mk/2/