• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 342
  • Last Modified:

Simple form required field validation.

Hi,

Im trying to find a simple script to let me validate 4 required fields in my form.
If one of them is empty an alert box should display which fields are missing without letting the form submit.

The form has been built. It submits to a PHP script fine.

I cant find a simple validation script that I can plug into it. They all seem over complicated.

Does anyone have anything ready to plugin?

Thanks for your help
0
SM17CH
Asked:
SM17CH
  • 2
2 Solutions
 
xav056Commented:
0
 
Michel PlungjanIT ExpertCommented:
Poor example.
They do not even pass the form to the function

Here is the canonical way to validate a form - it will work on all browsers since the beginning of time
It would have been useful to see your form code however. In this case I will have to guess at the field names and not handle radio/checkboxes
<html>
<head>
<script>
function validate(theForm) { // passing the form itself to the function
  var firstName=theForm.firstName.value;
  if (firstName=="") {
    alert("Please enter your First Name");
    theForm.firstName.focus(); // return the cursor to the field
    return false; // cancel the submission
  }

  var lastName=theForm.lastName.value;
  if (lastName=="") {
    alert("Please enter your Last Name");
    theForm.lastName.focus(); // return the cursor to the field
    return false; // cancel the submission
  }

  // repeat the above for each field
  
  return true; // when we get to here, all fields validates, allow submission
}

// the following is a courtesy function to place the cursor in the first field 
window.onload=function() {
  document.forms[0].firstName.focus(); // forms[0] is the first form on the page
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="firstName" value="" />
<input type="text" name="lastName" value="" /><br />
<input type="submit" />
</form>
</body>
</html>

Open in new window

0
 
SM17CHAuthor Commented:
Yep that works,

I ended up doing a simlar thing from another tutorial I found.

<script type="text/javascript">
function validateForm()
{
var x=document.forms["booking"]["First-Name"].value
var y=document.forms["booking"]["Last-Name"].value
var z=document.forms["booking"]["Phone-Number"].value
var w=document.forms["booking"]["Suburb"].value
if (x==null || x=="" || y==null || y=="" || z==null || z=="" || w==null || w=="")
  {
  alert("Please complete all required fields (*)");
  return false;
  }
 
}
</script>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I will argue that my suggestion is more user-friendly and does not rely on the form being named.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now