I tried to use a FOR loop for JS validation, but actually script validates only the last couple of fields.
If you press "submit" without filling in a form you will see all warning messages,
but if you filled in only a last "Contact name" and a "Phone" fields the for will be submitted
even if upper "Contact name" and a "Phone" are empty. What's wrong?
Code: Select all
<form method="post" action="read_create_phone_list.php" name="frm2">
<fieldset>
<legend>Phone List Form</legend>
<!-- contact fields -->
<label title="contact"><span class="red">* </span>Contact name:</label>
<input class="float" type="text" maxlength="100" id="fcontact1" name="fcontact1" onfocus="this.style.backgroundColor='white'"/>
<!-- phone fields -->
<label class="float" title="phone"><span class="red">* </span>Phone:</label>
<input class="float" type="text" maxlength="10" id="phone1" name="phone1" value="Contact's phone, numbers only " onfocus="this.style.backgroundColor='white';document.frm2.phone1.value='';" /><br />
<!-- contact fields -->
<label title='contact'><span class='red'>* </span>Contact name:</label>
<input class='float' type='text' maxlength='100' id='fcontact2' name='fcontact2' onfocus="this.style.backgroundColor='white'" />
<!-- phone fields -->
<label class='float' title='phone'><span class='red'>* </span>Phone:</label>
<input class='float' type='text' maxlength='10' id='phone2' name='phone2' value="Contact's phone, numbers only " onfocus=" this.style.backgroundColor='white';document.frm2.phone2.value='';" /><br />
<!-- <input class="btn" type="submit" value="Submit" " /> -->
<input class="btn" type="button" value="Submit" onclick="check_form7(2);" />
</fieldset>
</form>
<div id="create_phone_error_box"></div>
</div><!-- end multiform_box -->Code: Select all
function check_form7(x){
var error=1;
var error_text='';
for (i = 1; i <= x; i++)
{
var fcontact = "fcontact" + x;
var fphone = "phone" + x;
var contact = document.forms["frm2"][fcontact].value;
var phone = document.forms["frm2"][fphone].value;
/*start contact check*/
if (contact == "") {
error = 0;
document.forms["frm2"][fcontact].style.backgroundColor = "#ffd7d7";
error_text += 'The field "Contact name" is empty.<br/>';
}
var illegalChars = /[^a-zA-Zא-תа-яА-Я0-9_ ]/;
if (illegalChars.test(contact)) {
error = 0;
document.forms["frm2"][fcontact].style.backgroundColor = "#ffd7d7";
error_text += 'Only letters, numbers and underscore ("_") are allowed for the "Contact name" field<br />';
}
/* end contact check*/
/*start phone check*/
var phone = phone.replace(/[\+\(\)\.\-\ ]/g, ''); //we use regular expression and
//the replace() method to clear out any
//spacer characters: +().-space
if (phone == "") {
error = 0;
document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
error_text += "You didn't enter a phone number.<br/>";
}
else {
if ((phone.length != 10)) {
error = 0;
document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
error_text += "The phone number must be in 10 digits.<br/>";
}
}
var filter = /[^0-9]/;
if (filter.test(phone)) {
error = 0;
document.forms["frm2"][fphone].style.backgroundColor = "#ffd7d7";
error_text += "The phone number contains illegal characters.<br/>";
}
/*end phone check*/
} /*end of FOR loop*/
if (error==1)
{
document.frm2.submit();
}
else{
document.getElementById('create_phone_error_box').innerHTML=error_text;
}
}