CODEWITHSUNDEEP
javascriptphphtmlforms
user3565129
user3565129

Reputation: 37

Form submits regardless of validation

I have a form, and I've written a validation script for it, however, it's not working 100%. It outputs errors fine, but the submit button will submit the form, even if it has outputted the alert boxes. Anyone have any idea why?

Apparently not all the code pasted. I would just use the Required parameter, but I need JS validation as it is an assignment. Also, UL is defined before this part of code, as there is a list before this.

HTML:

<div class = "form">
            <form name = "contactForm" onsubmit="validateForm()" action = "form.php">

            <li><label>First name: </label><input type = "text" name = "fname" autofocus></li><br>

            <li><label>Last Name: </label><input type = "text" name = "lname"></li><br>

            <li><label>Email: </label><input type = "text" name = "email"> <button onclick = "validateEmail();return false">Check if email is valid</button> </li><br>

            <li><label>Message: </label> <br>

                <textarea rows = "10" cols = "50" name = "message"></textarea></li>

            <li> <input type = "submit"> </li>

            </form>

JavaScript:

function validateForm()
{
  var x=document.forms["contactForm"]["fname"].value; //Gets the form and field name from the HTML

  if (x==null || x=="") //If the field "fname" contains null, or nothing, then output an alert telling the user to input something into the field. Same goes for the rest of the code.
  {
    alert("First name must be filled out");
    return false;
  }

  var x=document.forms["contactForm"]["lname"].value;

  if (x==null || x=="") 
  {
    alert("Last name must be filled out");
    return false; 
  }

  var x=document.forms["contactForm"]["email"].value;

  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

  if(reg.test(x) == false)
  {
      alert("Please enter a valid Email");
      return false;
  }

  if (x==null || x=="")
  {
    alert("Email must be filled out");
    return false;
  }

  var x=document.forms["contactForm"]["message"].value;

  if (x==null || x=="")
  {
    alert("Message must be filled out");
    return false;
  }
}

Upvotes: 1

Views: 244

Answers (3)

MGE
MGE

Reputation: 912

You can also use JQuery to do something like this:

    $( "#formId" ).submit(function( event ) {
  if($("#nameInput").val() == "")
      event.preventDefault();
});

So basically, if nameInput's equals to empty the submit action will be canceled

Take a look at here if you want: https://api.jquery.com/submit/

Good luck

Upvotes: 0

Avikarsha Saha
Avikarsha Saha

Reputation: 133

You have to trigger event on time of submit. Like this way:

<form onsubmit="validateForm()">

Upvotes: 2

Ry-
Ry-

Reputation: 224906

How are you attaching the event listener? I’d wager it’s with:

<form … onsubmit="validateForm()">

You’d need return validateForm(). But wait! Don’t add that.

Your script does not check for valid e-mail addresses correctly. It only checks one error at once. It will annoy users. Use HTML5 validation and back it up with PHP.

  • By applying type="email", you don’t need a button at all, and mobile users will see an e-mail specific keyboard if available. The browser will validate it, given support.

    <input type="email" name="email">

  • Required fields should use the required attribute.

    <input type="text" name="fname" autofocus required>
⋮
<input type="text" name="lname" required>

Your labels aren’t correct either; they should surround the element they’re related to, or provide a for attribute matching the element’s id.

You should also validate your HTML. And not put <br>s between <li>s.

Finally, as general [client-side] JavaScript tips:

  • You don’t have to check the value of a text field for null.
  • Write !x instead of x == false.

Upvotes: 1

Related Questions