CODEWITHSUNDEEP
javascripthtmlvalidationdom
Please Delete me
Please Delete me

Reputation: 871

Javascript form validation needs fix

I'm trying to make a basic form validation but it's not working. I need to make it in such a way that after validation is passed, THEN ONLY it submits the form. I'm not sure how to do it though. My code is below.

[Important request] ** I'm actually pretty new to this so if possible I would like to get some concrete information/explanation concerning the DOM and how to manipulate it and style it (W3School is NOT helping) **

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="submit">Register</button>
</form> 



function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else{
        return true;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

Thanks

Upvotes: 0

Views: 116

Answers (4)

Hisham
Hisham

Reputation: 455

Your javascript code can be:

document.getElementById('submit').onclick = function () {
    if (validate()) {
        document.getElementById('reg').submit();
    }
}

function validate() {
    if (document.getElementById('first').value == "") {
        alert('First Name Blank!');
        return false;
    } else if (document.getElementById('last').value == "") {
        alert('Last Name Blank!');
        return false;
    } else {
        return true;
    }
}

Upvotes: 0

lukpaw
lukpaw

Reputation: 1613

Try this:

function validate() {
  var validForm = true;
  var msg = '';

  if (document.getElementById('first').value == "") {
    msg += 'First Name Blank! ';
    validForm = false;
  }
  if (document.getElementById('last').value == "") {
    msg += 'Last Name Blank! ';
    validForm = false;
  }
  if (!validForm) {
    alert(msg);
  }

  return validForm;
}

Plunker example

Upvotes: 1

Lugia101101
Lugia101101

Reputation: 671

Here's the code to check for validation and stop it from submitting if it is incorrect data.

<form id="reg" method="POST" action="user.php">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <label for="last">Last Name: </label>
    <input id="last" name="last" type="text" value="">


    <button type="button" id="submit">Register</button>
</form> 


document.getElementById('submit').onclick = function(){
    if(validate()){
         document.getElementById('reg').submit();
    }
}


function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;
    }else if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        return false;
    }else{
        return true;
    }
}

All I have done here is made the submit button a regular button and handled submitting via JS, When an input of type submit is clicked the page will submit the form no matter what. To bypass this you can make it a regular button and make it manually submit the form if certain conditions are met.

Upvotes: 0

Pointy
Pointy

Reputation: 413737

Your validation function only validates the first name. Whether it's valid or not, the function returns before checking the last name.

function validate(){

    if(document.getElementById('first').value == ""){
        alert('First Name Blank!');
        return false;        // WILL RETURN EITHER HERE ...
    }else{
        return true;         // ... OR HERE
    }

The return statement will exit the function at the point it appears, and other code after that is simply not executed at all.

Instead of doing it that way, keep a flag that determines whether the fields are all OK:

function validate(){
    var isValid = true; // Assume it is valid

    if(document.getElementById('first').value = ""){
        alert('First Name Blank!');
        isValid = false;
    }

    if(document.getElementById('last').value == ""){
        alert('Last Name Blank!');
        isValid = false;
    }

    return isValid;
}

Upvotes: 0

Related Questions