CODEWITHSUNDEEP
javascriptformsvalidation
Ardi Renaldi
Ardi Renaldi

Reputation: 49

Validating form input before submiting form

I've learned to make the login form and I planning to validate two values ​​( email and password ) and use it as a condition true or false .

i have code like this

    function userValid(email) {
    var usr = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$\i/ ;
    return usr.test(email);     
    };

    function passValid(password) {
    var passw = /^[A-Za-z]\w{7,14}$/;
    return passw.test(password);            
    };

the code above it use to validating email and password in my form and i think if i passing a value to that function (for example passing value email to userValid() function) it will return true/false.

i plan to create validating form or login form that first check the user email & password to be valid before i submit (lets say to the server).

and i think the logic is like this :

  1. if both values is TRUE then Login Success
  2. if one of the values is TRUE then Login Failed
  3. if both values is FALSE then Login Failed
  4. else (the value must be EMPTY or NULL) then Please Insert Email and Password

and so on

my question is how to create conditional statement with ABOVE case, and of course in JAVASCRIPT :) thanks.

Upvotes: 2

Views: 287

Answers (2)

LarsW
LarsW

Reputation: 1588

I don't know how you acces the email and the password, but this should work if you fill those in.

if ( userValid(email) == true && passValid(password) == true ) {
   //Login succes code
}
else if ( userValid(email) == false || passValid(password) == false ){
   //Login failure code
}
else {
   //The "Please insert" code
}

The && operater (and) returns true only if both values are true.

The || operater (or) returns true if at least one of the values is true.

This can probably be done easier, but it should work like this.

You can add code to check if the password and the username are empty, but I don't think that's necesarry.

Upvotes: 1

Ryan Rossiter
Ryan Rossiter

Reputation: 418

So what you want to do is create a function to be called when the user tries to submit your form. If this function returns false, the form will not submit. Otherwise it submits the form. You could write it like this:

var yourForm = document.getElementById("yourForm");
var yourEmail = document.getElementById("yourEmail");
var yourPassword = document.getElementById("yourPassword");
var yourWarningLabel = document.getElementById("yourWarningLabel");    

yourForm.onsubmit = function() {
    if (yourEmail.value == "" || yourPassword.value == "") { //Check if the fields have something in them
        yourWarningLabel.innerHTML = "Please Insert Email and Password";
        return false;
    } else return (userValid(yourEmail.value) && passValid(yourPassword.value));
};

Where yourWarningLabel is a <p>, <label> or other text tag that you use to display the warning.

The double pipes || represent an OR operator, meaning that if the email is empty OR the password is empty we should display a warning.

The double ampersands && represent an AND operator, meaning if the email passes AND the password passes the check then we return true and submit the form, otherwise it returns false.

In addition to this you should also be checking and cleaning input on your server side or in the page that uses the input.

Upvotes: 0

Related Questions