CODEWITHSUNDEEP
phpjavascripthtmlformsvalidation
17andLearning
17andLearning

Reputation: 477

JS form validation not working

I'm trying to validate some form fields using JS functions, but they don't seem to load or check the field when the submit button is clicked. 

<html>
  <body>
    <?php require_once('logic.php'); ?>
    <h1>Add new Region/Entity</h1>
    <?php 
      if ($_POST['submitted']==1) {
        echo $error;
      }
    ?>
    <form action="logic.php" method="post" name="registration" onSubmit="return formValidation();">
      Region: <input type="text" name="region" value="<?php echo @$_POST['region']; ?>"><br>
      Description: <br><textarea name="description" cols="50" rows="10"><?php echo @$_POST['description']; ?></textarea><br>
      Remarks: <input type="text" name="remarks" value="<?php echo @$_POST['remarks']; ?>">
      <input type="hidden" name="submitted" value="1"><br>
      <input type="submit" value="Submit" onclick="">

And here's the JS:

<script type="text/javascript">
  function formValidation() {
    var region = document.registration.region;
    var descr = document.registration.description;
    var remarks = document.registration.remarks;
    if(empty_validation()) {
      if(reg_validation()) {
        if(reg_letters()) {
          if (desc_letters()) {
            if (desc_validation()) {

            }
          }
        }
      }
    }
    return false;
  }
  function empty_validation() {
    var reg_len = region.value.length;
    var descr_len = descr.value.length;
    var rem_len = remarks.value.length;
    if (reg_len == 0 || decr_len == 0 || rem_len == 0) {
      alert("Please fill all the fields");
      return false;
    }
    return true;
  }
  function reg_validation() {
    if (reg_len > 50) {
      alert("Only 50 characters are allowed in the Region field");
      region.focus();
      return false;
    }
    return true;
  }
  function reg_letters() {
    var letters = /^[A-Za-z]+$/;
    if(region.value.match(letters)) {
      return true;
    } else {
      alert('Region field must have only alphabetical characters');
      region.focus();
      return false;
    }
  }
  function desc_validation() {
    if (descr_len > 500) {
      alert("Only 500 characters are allowed in the description field");
      descr.focus();
      return false;
    }
    return true;
  }
  function desc_letters() {
    var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?";
    for (var i = 0; i < descr_len; i++) {
      if (iChars.indexOf(descr.value.charAt(i)) != -1) {
        alert ("Your description has special characters. \nThese are not allowed.\n Please remove them and try again.");
        return false;
      }
    }
    return true;
  }
</script>
</form>
</body>
</html>

As you can see, I'm posting values from the form to a PHP file. And I've used the onSubmit event in the form tag to initialize the formValidation() function. It isn't working for some reason.

Here's a working example if you need one.

Upvotes: 0

Views: 396

Answers (1)

Ian
Ian

Reputation: 50905

I'm not going to fix every little error you have, but the main problem is that variables aren't defined where you expect them to be. You can't declare a variable in one function and expect it to be available in the next (without passing it as a parameter or declaring it globally). For example, your empty_validation function should be this:

function empty_validation(region, descr, remarks) {
    var reg_len = region.value.length;  
    var descr_len = descr.value.length;  
    var rem_len = remarks.value.length;  

    if (reg_len == 0 || decr_len == 0 || rem_len == 0) {
        alert("Please fill all the fields");  
        return false;  
    }
    return true;  
}

And in your formValidation function, you call it like this:

if(empty_validation(region, descr, remarks)) {

This is just one example, and you would need to do it in a few places.

A few other things - you always return false from formValidation...did you mean to put return true; inside the innermost if statement? Also, since all you seem to be doing is calling each of those functions, you can probably put them into one big if statement, like this:

if (empty_validation() && reg_validation() && reg_letters() && desc_letters() && desc_validation()) {
    return true;
}
return false;

Upvotes: 1

Related Questions