Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Simple form required field validation.

Posted on 2011-02-12
4
Medium Priority
?
339 Views
Last Modified: 2012-05-11
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
Comment
Question by:SM17CH
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 9

Accepted Solution

by:
xav056 earned 800 total points
ID: 34881228
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1200 total points
ID: 34881559
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
 
LVL 2

Author Comment

by:SM17CH
ID: 34881666
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
 
LVL 75

Expert Comment

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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question