How to stop Ajax form submitting if fields are blank or if using Safari?

A brief description:

My form uses jQuery to validate the client-side, php to validate and handle the server-side, and ajax for the submit, to stop the page refresh, and to clear the form after submit.

The Problem: The form still submits if missing form fields (all browsers) and if totally blank (Safari).

My question is how can I stop the form from progressing to the submit if all or a few fields are blank?

All help is welcomed and greatly appreciated, thank you.

HTML Form:

    <div id="form">
  <form name="form" action="form_process.php" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="fname" name="fName" value="<?php echo $_GET['fName'];?>" placeholder="First Name" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="lName" name="lName" value="<?php echo $_GET['lName'];?>" placeholder="Last Name" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="email" name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" />
    </p>
    <p>
      <input type="text" maxlength="80" size="50" required="required" id="subject" name="subject" value="<?php echo $_GET['subject'];?>" placeholder="Subject" />
    </p>
    <p>
      <textarea name="message" rows="6" cols="38" required="required" id="message" placeholder="Message"></textarea>
    </p>
    <br />
    <input type="submit" value="Submit" name="submit" />
    <input type="reset" value="Clear" name="clear" />
  </form>
</div>

jQuery Validation:

//form validation starts here


function validateForm(){

//first name field  
var a=document.forms["form"]["fName"].value;
if (a==null || a=="")
  {
  alert("Please enter your first name.");
  return false;
  }

//last name field
var b=document.forms["form"]["lName"].value;
if (b==null || b=="")
  {
  alert("Please enter your last name.");
  return false;
  }

//email address field
var c=document.forms["form"]["email"].value;
var atpos=c.indexOf("@");
var dotpos=c.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length)
  {
  alert("Please enter a valid e-mail address");
  return false;
  }

//subject field
var d=document.forms["form"]["subject"].value;
if (d==null || d=="")
  {
  alert("Please enter a subject.");
  return false;
  }

//message field
var e=document.forms["form"]["message"].value;
if (e==null || e=="")
  {
  alert("Please enter a message.");
  return false;
  }
}//validation ends

$(function () {

    $('form').on('submit', function (e) {

          $.ajax({
            type: 'post',
            url: 'form_process.php',
            data: $('form').serialize(),
            success: function () {
                alert('Your message has been submitted.  You will be contacted shortly, thank you.');
                $('form')[0].reset();//clear form after submit success
            }//success ends
          });//ajax ends
         e.preventDefault();//prevent default page refresh
        });//submit ends
});//function ends

Answers


  1. Add some flag to your form using $.data() or add an class like valid or invalid to it once one of your error triggered

  2. Check for this flag like that:

    $(form).on('submit', function () {

        if ($(this).hasClass('invalid') {
           // error handling
        } else{
           // your ajax call
        }
        e.preventDefault();
    }

Need Your Help

Flattr API Call for Discoverable URLs

api url flattr

Do you know how to do an API Call for Discoverable URLs? Can I just do something like:

How can I have Angular-Translate preload my translation before I can use it inside my controller?

angularjs

I am trying out Angular Translate and I need to use the translations inside my controller, but the controller runs the code before my translation is even loaded yet..here is my code: