[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Forms Validation

Posted on 2011-02-14
15
Medium Priority
?
182 Views
Last Modified: 2012-05-11
How do I validate a form on submit and print the error message on the Page instead of  alert box?

Thank you!!
0
Comment
Question by:cuconsortium
[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
  • 7
  • 4
  • 4
15 Comments
 
LVL 3

Expert Comment

by:thecrew
ID: 34892973
I would suggest jQuery.  Easy to use, easy to customize.

http://docs.jquery.com/Plugins/validation

0
 

Author Comment

by:cuconsortium
ID: 34893034
why this one is so popular?  
0
 

Author Comment

by:cuconsortium
ID: 34893043
I'm looking for java script.  how about something related to "getInnerHTML"?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:thecrew
ID: 34893103
jQuery is JavaScript.

It's popular because it works, it's open, it's free, it's easy to use and it's well documented.

Read the page I sent you. It will do EXACTLY what you are asking to do.
0
 

Author Comment

by:cuconsortium
ID: 34893448
it seems the validation is pretty fix to E-mail Address, Phone Number, URL... and etc.  I need to valdidate the input types in my ownways.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34894384
Here is the canonical validation. jQuery is not needed for simple validation and I only use jQuery if I already need it for some animation.
<html>
<head>
<script>
function validate(theForm) {
  var field1 = theForm.field1.value;
  if (field1=="") {
    alert('Please enter something in field1');
    theForm.field1.focus(); // put the cursor back in the field
    return false; // cancel submission
  }

  var field2 = theForm.field2.value;
  if (field2=="") {
    alert('Please enter something in field2');
    theForm.field2.focus(); // put the cursor back in the field
    return false; // cancel submission
  }

// repeat the above as needed

  return true; // here all fields validates, allow submission
}
window.onload=function() {
  // courtesy method to place the cursor in the first field
  document.forms[0].field1.focus(); // forms[0] is the first form on the page
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="field1" value="" /><br>
<input type="text" name="field2" value="" /><br>
<input type="submit" />
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:cuconsortium
ID: 34899992
mplungjan,

  it's pretty good, but it's prompting alert box.  Is there anyway that i can print the error message on the page itself?

  Or

   have one alert box list all the errors when onSumbit?

Thank you!!
0
 
LVL 3

Expert Comment

by:thecrew
ID: 34900356
That is the reason I was suggesting jQuery, you can easily show errors inline wherever and however you like. The validation can be applied to anything you want (not just emails and phone numbers, those are just examples on the plugin page). I've used it to validate a date-range, a percentage, all sorts of crazy things. Although I completely agree with mplungjan, if you are not already using it for another legitimate reason it might not be the best solution.

To change text on the page you could use

document.getElementById('theID').innerHTML = 'Error man!';
(your HTML could be something like this: <b id="theID"></b>)


0
 
LVL 3

Assisted Solution

by:thecrew
thecrew earned 600 total points
ID: 34900458
Here you go, I took mplungjan's code and changed a few things. Now you won't get the alert boxes, instead you will get inline text error messages, the messages will automatically clear when you submit too.

<html>
<head>
<script>
function validate(theForm) {
  var field1 = theForm.field1.value;
  if (field1=="") {
    document.getElementById('firstError').innerHTML = 'Error! Missing this input!';
	theForm.field1.focus(); // put the cursor back in the field
	var error = "error"; // set error var so we can stop the from from submitting
  } else { // if the field has stuff in it then make sure the error is blank
  	document.getElementById('firstError').innerHTML = '';
  }

  var field2 = theForm.field2.value;
  if (field2=="") {
    document.getElementById('secondError').innerHTML = 'Error! Missing this input!';
    theForm.field2.focus(); // put the cursor back in the field
	var error = "error";
  } else {
  	document.getElementById('secondError').innerHTML = '';
  }

// repeat the above as needed

  if (error == "error"){
  	return false; // if there was an error anywhere then cancel submission
  }

  return true; // here all fields validates, allow submission
}
window.onload=function() {
  // courtesy method to place the cursor in the first field
  document.forms[0].field1.focus(); // forms[0] is the first form on the page
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="field1" value="" />
<b id="firstError"></b><br>
<input type="text" name="field2" value="" />
<b id="secondError"></b><br>
<input type="submit" />
</form>
</body>
</html>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1400 total points
ID: 34900913
I could do that myself ;)

Here is a more elegant version
If you have a message, the field is obligatory.
Let me know if you need selects and/or radios too
<html>
<head>
<style>
.error { color:red }
</style>
<script>
var messages = {
	"field1":"Please enter a value in field1",
	"field2":"Please enter a value in field2"
} // notice no comma after the last item	
	
function validate(theForm) {
  var fieldToFocus=null;
  for (var o in messages) {
    var field = theForm.elements[o];
    var error = document.getElementById(o+"error");
    error.style.visibility='hidden'; // keep the space
    if (field.value=="") {
      error.innerHTML = messages[o];
      error.style.visibility="visible"
      if (!fieldToFocus) fieldToFocus=field;
    }
  }

  if (fieldToFocus){
  	fieldToFocus.focus();
  	return false; // if there was an error anywhere then cancel submission
  }

  return true; // here all fields validates, allow submission
}
window.onload=function() {
  // courtesy method to place the cursor in the first field
  document.forms[0].field1.focus(); // forms[0] is the first form on the page
}
</script>
</head>
<body>
<form onsubmit="return validate(this)">
<input type="text" name="field1" value="" />&nbsp;<span id="field1error" class="error"></span><br />
<input type="text" name="field2" value="" />&nbsp;<span id="field2error" class="error"></span><br />
<input type="submit" />
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:cuconsortium
ID: 34919581
ok, i'm gonna try it out and report back~
0
 

Author Comment

by:cuconsortium
ID: 34999400
Hi all~

  I was out for a week.  I'm gonna take a look at this this week.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36178104
Happy?
0
 

Author Comment

by:cuconsortium
ID: 36182147
yesss!!! good job~~!  I feel bad that I wasn't able to be more involved than I want myself to be.  
You've done a good job!!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36182243
:)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

649 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