Javascript How to use multiple function in html form submission to validate

Question

Html form driving me crazy. I have a function that checks for mismatch passwords and if the username specified is already taken. If you pass both of these checks then the form should submit, but it isn't.

It's not a db problem. I've checked that and it connects just fine.

The post in checkname and the post in the form both work when removing the double onsubmit argument. If anyone has any ideas please let me know :)

Here is link of the project I am currently working :

Functions and form:

function validatePassword() {
  var pass1 = document.getElementById("password").value;
  var pass2 = document.getElementById("confirm_password").value;

  if (pass1 != pass2) {
    alert("Passwords Do not match");
    document.getElementById("password").style.borderColor = "#E34234";
    document.getElementById("confirm_password").style.borderColor = "#E34234";
    return false;
  } else {
    return true;
  }
}

function checkname() {
  var name = document.getElementById("username").value;

  if (name) {
    $.ajax({
      type: 'post',
      url: 'checkdata.php',
      data: {
        user_name: name,
      },
      success: function(response) {
        $('#name_status').html(response);
        if (response == "OK") {
          return true;
        } else {
          return false;
        }
      }
    });
  } else {
    $('#name_status').html("");
    return false;
  }
}


function checkall() {
  var namehtml = document.getElementById("name_status").innerHTML;


  if ((namehtml) == "OK") {
    return true;
  } else {
    return false;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<font size=4><b>Customer sign up</b></font>
<form name="input" action="customer_insert.php" onsubmit=" return !!(validatePassword() & checkall());" method="post">
  <br> Username: <input type="text" maxlength="45" name="username" id="username" onchange="checkname();" required="required">
  <span id="name_status"></span>
  <br> Password: <input type="password" maxlength="128" name="passwd1" id="password" required="required">
  <br> Retype Password: <input type="password" maxlength="128" name="passwd2" id="confirm_password" required="required">
  <br> First Name: <input type="text" maxlength="45" name="firstname" required="required">
  <br> Last Name: <input type="text" maxlength="45" name="lastname" required="required">
  <br> E-mail: <input type="email" name="email" required="required">
  <input type="submit" name="Signup" value="Signup">
</form>

@SamuelJMathew check this stackoverflow.com/questions/11806253/… — overboard182
– overboard182, Commented Mar 2, 2017 at 16:00

overboard182 · Accepted Answer · 2017-03-02 19:16:27Z

0

Fixed it. Problem was directly using checkname() in the condition results in undefined return and therefor, the condition could never be met. Now I take part of the old checkall() and integrated it with your validate method. This works. Thanks!

function validateForm(){
    var a = validatePassword();
    var b;

    var namehtml=document.getElementById("name_status").innerHTML;


    if(namehtml=="OK")
    {
            b = true;
    }
    else
    {
            b = false;
    }


    if(a && b){

            return true;

    }
    else{

            return false;
    }
}

answered Mar 2, 2017 at 19:16

overboard182

3004 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript How to use multiple function in html form submission to validate

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related