CODEWITHSUNDEEP
javascripthtml
HelpAGirlOut
HelpAGirlOut

Reputation: 77

How do I validate two input fields on HTML form?

I want to have two inputs, one will be name and the other is module code.
How can I display an error message on either inputs if the pattern is wrong for either fields or if one field is empty?
Pretty sure something is wrong with my if-else statement ://
When I click submit, the form action will be activated.
Appreciate all help :)

function validateForm() {
  var fname = document.getElementById("fname").value;
  if (/^[A-Z]\D{2,30}$/.test(fname) == false) {
  //if its true, it will go to the second input
    document.getElementById("errorName").innerHTML = "Wrong format";
    fname.style.color="red";
    return false;
  } else {
    document.getElementById("errorName").innerHTML = "";
  }
    
  var mcode = document.getElementById("mcode").value;
  if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) {
    document.getElementById("errorCode").innerHTML = "Wrong format";
    mcode.style.color="red";
    return false;
  } else {
    document.getElementById("errorCode").innerHTML = "";
  }
  return true;
}
<form action="handleServer.php" method="get" onSubmit="return validateForm()">
  First name: </br>
  <input id="fname" type="text" name="fname" size="30"> 
  <span id="errorName" class="error"></br> 
  
  <!-- module code -->
  Module code: </br>
  <input id="mcode" type="text" name="mcode" size="30"> 
  <input type="submit" value="Submit">
  <span id="errorCode" class="error"></br>

Upvotes: 1

Views: 1076

Answers (1)

firatozcevahir
firatozcevahir

Reputation: 882

You can do something like this to check whether the input fields are empty

function validateForm() {
    var fname = document.getElementById("fname").value;
    var mcode = document.getElementById("mcode").value;
    var errorName = document.getElementById("errorName");
    var errorCode = document.getElementById("errorCode");

    if (fname === '') {
        errorName.innerHTML = "fname empty";
        return false;
    }
    if (mcode === '') {
        errorCode.innerHTML = "mcode empty";
        return false;
    }
    if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input 
    {
        errorName.innerHTML = "Wrong format";
        fname.style.color = "red";
        return false;
    } else {
        errorName.innerHTML = "";
    }

    if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) {
        errorCode.innerHTML = "Wrong format";
        mcode.style.color = "red";
        return false;
    } else {
        errorCode.innerHTML = "";
    }
    return true;
}

Upvotes: 1

Related Questions