JavaScript multiple input validations

Question

I was trying to validate Surname required field and NIC should only be in Numbers. But the problem is this code not checking NIC.

<script>
  function validateform(SnameAddress,mail,NIC,dob){
    var required=""
    if(document.getElementById("Sname").value == ""){
      alert("Surname : field is required");
      return false;
    }
  }

  function validateNIC(NIC){
    var nic=document.getElementById("NIC").value;
    if(isNaN(nic)){
      alert("NIC : incorrect NIC num"); 
      return false;
    }
  }

</script>

<form action="MAILTO:[email protected]" method="post" enctype="text/plain" action="#"
onsubmit="return (validateform() && validateNIC())">

  Surname <input type="text" id="Sname" >
  NIC <input type="text" id="NIC">
</form>

The value from an input will always be a string, you could try isNaN(Number(nic)) — dahliacreative
– dahliacreative, Commented Jul 17, 2018 at 13:21
You call validateform() without param, and you define the function with param...Same as validateNIC() — Jax Teller
– Jax Teller, Commented Jul 17, 2018 at 13:27

Abdel Hady Mohamed · Accepted Answer · 2018-07-17 15:42:16Z

3

logical AND operation '&&' employs short-circuiting behavior which means that if the first condition didn't return true, It will not check the second condition. So we have two conditions here:

validateform() returns false if Sname.value is equal "", then the AND operation will not check for the seocnd condtion and will not enter validateNIC() function.
validateform() will not return true if Sname.value is not equal "", then also the AND operation will not check for the seocnd condtion

So you can add return ture; at the end of validateform() but this will make you only enter validateNIC() if Sname.value is not equal ""

If you want to check both you can put all the validation in the same function like that:

<script>
  function validateform() {
    var isValid = true;
    if (document.getElementById("Sname").value == "") {
      alert("Surname : field is required");
      isValid = false;
    }
    var nic = document.getElementById("NIC").value;
    if (isNaN(nic)) {
      alert("NIC : incorrect NIC num");
      isValid = false;
    }
    return isValid;
  }
</script>
<form action="MAILTO:[email protected]" method="post" enctype="text/plain" action="#" onsubmit="return validateform()">
  Surname
  <input type="text" id="Sname"> NIC
  <input type="text" id="NIC">
</form>

edited Jul 17, 2018 at 15:42

answered Jul 17, 2018 at 13:56

Abdel Hady Mohamed

987 bronze badges

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

2 Comments

Sakuna Madushanka Over a year ago

after i change the functions, the problem is now its only checks the validateForm() and whether it's true or false, its calling to the form method

Abdel Hady Mohamed Over a year ago

I added a code that will check for all conditions whatever happens

Dmitry Surin · Accepted Answer · 2023-08-03 10:44:50Z

2

I can suppose that you didn't check isNaN function well. For example:

isNaN("123.0")
false
isNaN("123,0")
true

So try to play with isNaN build-in function via developers console (f12) to check your possible inputs. Maybe you need to write some logic above existing code.

edited Aug 3, 2023 at 10:44

answered Jul 17, 2018 at 13:32

Dmitry Surin

3712 silver badges13 bronze badges

Comments

Programmer · Accepted Answer · 2018-07-17 13:23:22Z

1

I guess it's because you don't return true on validateform if it is valid. Because of that, in "and" (&&) condition there is no reason to check the second part of the condition when the first part is not true, so validateNIC is not called.

answered Jul 17, 2018 at 13:23

Programmer

2,1231 gold badge13 silver badges21 bronze badges

Comments

Jax Teller · Accepted Answer · 2018-07-17 13:44:27Z

1

Step 1: If you don't use param in your function, juste remove it. function validateform(SnameAddress,mail,NIC,dob) -> function validateform()

function validateNIC(NIC) -> function validateNIC()

Step 2 : Add return true (As said @Dmitry Surin)

function validateform(){
   var required=""
   if(document.getElementById("Sname").value == ""){
       console.log("Surname : field is required");
       return false;
   } else {
       return true;
   }
}

function validateNIC(){
   var nic=document.getElementById("NIC").value;
   if(isNaN(nic)){
      console.log("NIC : incorrect NIC num"); 
      return false;
    } else {
        return true;
    }
}

JSFiddle : https://jsfiddle.net/xpvt214o/431790/

answered Jul 17, 2018 at 13:44

Jax Teller

1,4772 gold badges15 silver badges25 bronze badges

3 Comments

Sakuna Madushanka Over a year ago

is there any problem with the way that I calling onsubmit event?

Jax Teller Over a year ago

no, this is right, i just modify for the jsfiddle result, so we can see the result of validateform() && validateNIC()

Sakuna Madushanka Over a year ago

even though i followed your code, it's not checking Nic is Numeric or not

Collectives™ on Stack Overflow

JavaScript multiple input validations

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related