Simple Javascript form validation code issue

Question

Basically I am trying to write some code to use for form validation, Im quite new to this but am managing ok I think? My issue is basically this, I have created 3 validation methods for the 3 inputs i have in my form but im not quite sure how i go about adding all 3 methods to the one button click?

my code so far is:

function validation() {
  function validateName() {
    console.log("reaching here");

    var name = document.getElementById("full_name");

    if (name.value.length == 0) {
      document.getElementById("okName").className = "fail";
    }else{
      document.getElementById("okName").className = "success";
    }
  }//End of validate name

  function validateEmail() {
    var email = document.getElementById("email");

    if (email.value.length == 0) {
      document.getElementById("okEmail").className = "fail";
    }else{
      document.getElementById("okEmail").className = "success";
    }
  }//end of validate email

  function validatePhone() {
    var phone = document.getElementById("phone");

    if (phone.value.length == 0) {
      document.getElementById("okPhone").className = "fail";
    }else{
      document.getElementById("okPhone").className = "success";
    }
  }//End of validate phone
}//End of validation function

I also tried removing all the validation methods from individual functions and just had them in one single fnction but this wouldnt work either? if anyone could shed some light on where im going wrong it would be great! Cheers in advance!

DannyW86 · Accepted Answer · 2012-07-16 14:11:23Z

0

Try to attach an onclick() event to your submit button - http://jsfiddle.net/zWrUM/

<button onclick="validation();">validate</button>

<script>
function validation() {
    var name = document.getElementById("full_name");
    if (name.value.length == 0) {
      document.getElementById("okName").className = "fail";
        alert("error 1");
        return false;
    }else{
      document.getElementById("okName").className = "success";
    }

    var email = document.getElementById("email");
    if (email.value.length == 0) {
      document.getElementById("okEmail").className = "fail";
        alert("error 2");
        return false;
    }else{
      document.getElementById("okEmail").className = "success";
    }

    var phone = document.getElementById("phone");
    if (phone.value.length == 0) {
      document.getElementById("okPhone").className = "fail";
        alert("error 3");
        return false;
    }else{
      document.getElementById("okPhone").className = "success";
    }

    alert("success")
}//End of validation function
</script>

edited Jul 16, 2012 at 14:11

DannyW86

1993 gold badges8 silver badges21 bronze badges

answered Jul 16, 2012 at 13:34

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

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

4 Comments

DannyW86 Over a year ago

For some reason this wont reach the second stage of the validation, it stops at alert 1? Having checked in the console to see if it was making it to the next step i can see it isnt even getting that far?

Zoltan Toth Over a year ago

if you have an error in your 1st input it does return false, which stops the execution of the function

DannyW86 Over a year ago

Ah ok i see it now! Thanks for your help!! Is there any way i can have it so all the checks are done at the same time?

DannyW86 Over a year ago

Thats not exactly what im trying to do, you see I have 2 images that appear beside my inputs, one with a green tick for success and a red X for fail, so when I click submit as this code stops the process only the first red X appears if there is a mistake, is there a way I can have all 3 appear onClick of the submit or at least for however many invalid inputs there are?

Inkbug · Accepted Answer · 2012-07-16 13:28:05Z

0

You can look into addEventListener and the oldIE similar methods.

answered Jul 16, 2012 at 13:28

Inkbug

1,6931 gold badge11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Simple Javascript form validation code issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related