How to validate form input text with javascript

Question

I'm trying to create a form with different inputs, input validation error receiving text, it does not validate (I want to be just text). The code is:

<form action="" id="myform" name="checkform" onsubmit="return validateform()" method="post">
    <label for='Name'>Name:</label>
    <input type="text" name="name" id="name"><br>
    <label for='Surname'>Surname:</label>
    <input type="text" name="surname" ><br> 
    <input type="submit" name="submit" value="Submit">
</form>

The javascript is:

   function validateform(){     
    if(document.checkform.name.value == ""){
        window.alert("Please insert your name.");
            document.checkform.name.focus();
            return false;
    }
    var nameText = document.forms["myform"]["name"].value; /* here is the problem :-( */
    if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
    alert("Insert just letters !!!");
    return false;
    }
}

You create a variable nameText and then on the next line say name.match() - it should be nameText.match(). Why are you using document.checkform.name.value first and then document.forms["myform"]["name"].value to reference the same field? Pick a syntax and stick with it. — nnnnnn
– nnnnnn, Commented Oct 29, 2014 at 11:00
<input type="text" name="name" pattern="/[a-zA-Z]+/" required> (+ polyfill for non-html5 browsers) — pawel
– pawel, Commented Oct 29, 2014 at 11:02

user2575725 · Accepted Answer · 2014-10-29 11:01:50Z

function validateform() {
  var nameTxtBx = document.checkform.name,
    name = nameTxtBx.value; //<-- added this line
  if (name == "") {
    alert("Please insert your name.");
    nameTxtBx.focus();
    return false;
  }
  if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
    alert("trebue doar litere");
    return false;
  }
  return true; //<-- added this line
}

<form action="" id="myform" name="checkform" onsubmit="return validateform()" method="post">
  <label for='Name'>Name:</label>
  <input type="text" name="name" id="name">
  <br>
  <label for='Surname'>Surname:</label>
  <input type="text" name="surname">
  <br>
  <input type="submit" name="submit" value="Submit">
</form>

@pascarel, I am glad it helped you, you may accept my answer as it worked for you ....

Krish R · Accepted Answer · 2014-10-29 11:08:34Z

0

You have typo in your variable, You just rename your variable nameText into name or vice versa.

 var nameText = document.forms["myform"]["name"].value;
     ^^^^^^^  
 if (!name.match(/^\s*[A-Za-z]+\s*$/)) {
      ^^^^

answered Oct 29, 2014 at 11:08

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

Comments

RobG · Accepted Answer · 2014-10-29 11:29:32Z

Named form controls are made members of the form using their name. So even though the form has a name property, because your form also has a control with a name of name, then form.name references the control, not the form's name property.

Similarly, having a control with a name of submit means that you can't call the form's submit method, because form.submit references the control, not the method. So you should use control names that don't clash with standard form properties. Also, it's rare to require an ID for form controls since they can be referenced as properties of the form.

Lastly, it is handy to pass a reference to the form from the listener using this, then you don't need an ID on the form either. Consider:

<form onsubmit="return validateform(this)" ... >
    Name: <input type="text" name="firstName"><br>
    Surname: <input type="text" name="surname"><br>
    <input type="submit" value="Submit">
</form>

Then in the function:

function validateform(form) {

Get the value of the firstName control once:

  var firstName = form.firstName.value;

Now do the tests:

  if (firstName == "") {
    window.alert("Please insert your first name.");
    form.firstName.focus();
    return false;
  }

It's more appropriate to use test than match if you want to test for a pattern rather than find all the matches:

  if (!/^\s*[A-Za-z]+\s*$/.test(firstName)) {
    alert("Insert just letters !!!");
    return false;
  }
}

Collectives™ on Stack Overflow

How to validate form input text with javascript

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related