JavaScript Input Field Validation

Question

I wrote validation code for a form, which goes:

function checkWholeForm(theForm) {
  // Create validation variables
  var valid = true;
  var validationMessage = "Please correct the following errors: \r\n";

  // Validate name
  if (document.getElementById('name').value.length == 0)
        {
            validationMessage = validationMessage + '  - Name is missing\r\n';
            valid = false;
        }

//(and there's a few other functions)

// Display alert box with errors if any errors found
  if (valid == false)
        {
            alert(validationMessage);
        }

        return valid;

  }

and then in the HTML page, it goes:

<form action="submit.php" method="post" enctype="text/plain" onsubmit="return checkWholeForm(this)">

and in the table is:

<input type="text" id="name" name="name" size="20" value="" />

But when I hit submit, an empty text box doesn't trigger the alert. What am I doing wrong?

Edit: http://jsbin.com/uvepin/2/edit for the full HTML and JS.

validationMessage = validationMessage + ' - Name is missing\r\n'; should have double quotes if you want to add a \r or a \n. This is not the reason your script doesn't work. Please use pastebin or paste the complete script here. — Kumar
– Kumar, Commented Jun 2, 2013 at 1:02
@AC validationMessage is not defined, please rename it to validMess or define it. — arma
– arma, Commented Jun 2, 2013 at 1:08
You've renamed it to validMessage when it should be validationMessage. And please don't use patsebin.com, use jsfiddle.net or jsbin.com so that you can also include your html/css and we can actually run your code. — nnnnnn
– nnnnnn, Commented Jun 2, 2013 at 1:24
@Kumar - '\r\n' is perfectly valid JS. You don't need double-quotes. — nnnnnn
– nnnnnn, Commented Jun 2, 2013 at 1:26

box86rowh · Accepted Answer · 2013-06-02 01:41:02Z

1

OK, many issues, you are using getElementById, but your id is not set for the email box, also to do form validation, change from type = submit to type = button and use onclick instead of onsubmit

my edited version: http://jsbin.com/ujeval/1/

answered Jun 2, 2013 at 1:41

box86rowh

3,4252 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nnnnnn Over a year ago

You need the return to prevent the submit going ahead when validation fails.

nnnnnn Over a year ago

That updated demo doesn't work - the form will never submit because you always return false from the onsubmit.

nnnnnn · Accepted Answer · 2013-06-02 01:44:19Z

If you open your browser's console (F12 in Chrome and IE; ctrl-shift-K in FF) you'll see that your code gives this error:

Uncaught ReferenceError: validationMessage is not defined

...because you declared the variable as validMess. Then in your update to the question you renamed it to validMessage. But still your other code is referring to validationMessage.

// WRONG:
var validMessage = "Please correct the following errors: \r\n";

// RIGHT:
var validationMessage = "Please correct the following errors: \r\n";

Demo: http://jsfiddle.net/JH8hg/

UPDATE to go with your latest update:

In your jsbin.com demo, you have attempted to add an onsubmit handler to a button:

<input class="button" name="send" type="submit" value="Send!" onsubmit="return checkWholeForm(this)" />

...but buttons don't have an onsubmit event so this should be added to the form element:

<form action="mailto:[email protected]" method="post" enctype="text/plain"
      onsubmit="return checkWholeForm(this)">

And that form element doesn't have a closing </form> tag.

And you forgot to give an id="email" to your email field which means you got a JS error when you tried to use document.getElementById('email').value.length.

Working demo with those things fixed: http://jsbin.com/ukepuh/1/edit

OK, answer updated to cover the problems in your demo. (Different problems to what you had in the code in your question.)

Collectives™ on Stack Overflow

JavaScript Input Field Validation

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related