0

I have basic html and want to validate the fields with jQuery validator so I have less validation on php level. The form validates if all fields are empty and prevents submission to php but as soon as I complete 1 input the form sumits (even if all other fields are blank). All fields are required so I'm stumped - please help!

After some of your advice I have redone my validation on php level but it has the exact same effect. If all the fields are empty the validation works, as soon as 1 field is filled in the form submits.

jQuery: I ran it through JSLint and it yielded no errors - unbelievable right?!

$().ready(function () {
  "use strict";
  $('#register').validate({

rules: {
  firstname: {
    required: true,
    maxLength: 40
  },
  lastname: {
    required: true,
    maxLength: 40
  },
  email: {
    required: true,
    maxLength: 64,
    email: true
  },
  password: {
    required: true,
    minLength: 6,
    maxLength: 32
  },
  confirmPassword: {
    required: true,
    equalTo: "#password"
  },
  rsaid: {
    required: true,
    digits: true
  }
},

messages: {
  firstname: {
    required: "Please enter your first name.",
    maxLength: "Your first name cannot exceed 40 characters."
  },
  lastname: {
    required: "Please enter your last name.",
    maxLength: "Your last name cannot exceed 40 characters."
  },
  email: {
    required: "Please enter your email address.",
    maxLength: "Your email address cannot exceed 64 characters.",
    email: "The email format provided is invalid."
  },
  password: {
    required: "Please enter a password.",
    minLength: "Your password must contain at least 6 characters.",
    maxLength: "Your password cannot contain more than 32 characters."
  },
  confirmPassword: {
    required: "Please confirm your password.",
    equalTo: "Your passwords do not match!"
  },
  rsaid: {
    required: "Please enter a valid RSA id number.",
    //exactLength: "Your ID number must contain 13 characters!",
    digits: "Your ID number must consist of numerals only!"
  }
},

errorContainer: $('#errorContainer'),
errorLabelContainer: $('#errorContainer ul'),
wrapper: 'li'

});
});

html: Shouldn't be necessary but just in case :)

<div class="registrationForm">
        <form id="register" action="php/insert.php" method="post">
        <input type="text" id="firstname" name="firstname" placeholder="First Name" value="" class="radius mini" />
        <input type="text" id="lastname" name="lastname" placeholder="Last Name" value="" class="radius mini"/>
        <input type="text" id="email" name="email" placeholder="Your Email" value="" class="radius" />
        <input type="password" id="password" name="password" placeholder="New Password" value="" class="radius" />
        <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password" value="" class="radius" />
        <input type="text" id="rsaid" name="rsaid" placeholder="RSA ID Number" value="" class="radius" />
        <button class="radius title" name="signup">Sign Up for SFC</button>
    </form>
</div>

PHP code: This contains code for only the first 3 fields as password validation is long and irrelevant. The code returns no errors on phpcodechekcer.com.

if ($_SERVER["REQUEST_METHOD"] == "POST") {

  if (empty($_POST["firstname"])) {
  $firstnameErr = "First name is required";
} else {
$firstname = mysqli_real_escape_string($link, $_POST['firstname']);
  }

 if (empty($_POST["lastname"])) {
  $lastnameErr = "Last name is required";
  } else {
  $lastname = mysqli_real_escape_string($link, $_POST['lastname']);
 }

  if (empty($_POST["email"])) {
   $emailErr = "Email address is required";
   } else {
  if (!isValidEmail($_POST["email"])) {
    $emailErr = "Email address is invalid";
   } else {
    $email = mysqli_real_escape_string($link, $_POST['email']);
   }
  }
 }
  • I suggest you do the validation with php.if the user turns off the js and adds a malicious code(XSS) in the text box your website will most likely get hacked – Shrikantha Budya Feb 13 '16 at 10:15

3 Answers3

0

better make validation on server side, if your client turn off javascript on browser then all data will send to server without any validation

  • That is true... If javascript is turned on this is much more convenient and aesthetically pleasing to the end user. – Clark Fourie Feb 13 '16 at 09:01
0

It's to be need jquery file link on header of html.

  • I should have added that to the code, I have hot liked jquery 1.12.0 and the jquery.validator 1.14.0 as well as my script. If I run a simple jQuery alert it works. – Clark Fourie Feb 13 '16 at 08:59
0

Perhaps it's because you are not using fieldset enclosing? On the other side, you may look towards plain HYML5 validation.

Daniel Protopopov
  • 6,778
  • 3
  • 23
  • 39
  • When using a form a fieldset does not seem to be necessary http://stackoverflow.com/questions/658208/does-fieldset-have-to-be-in-a-form – Clark Fourie Feb 14 '16 at 08:07
  • Your problem is in the naming of the minLength / maxLength - jquery.validate was throwing errors trying to call those methods - you should've used minlength (note the case'iness) and maxlength. See https://jsfiddle.net/L6ca31ek/ – Daniel Protopopov Feb 14 '16 at 09:47
  • Wow thank you that did the trick! Was trying everything I possibly could and the case was my issue :/ – Clark Fourie Feb 18 '16 at 09:48