NoName84 NoName84 - 1 month ago 9
Javascript Question

Javascript Validation Form Issue

I am creating a simple validation form using javascript but there is an issue with my code. I have a username and a password input fields. What i would like is when i submit the form, if one of the fields is empty to not proceed the form to a database but to stay on the page and reveal the span next to the input that says "please fill in this field". How can i fix the issue?

Thanks.

HTML Code:

<form action="#" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<span id="userspan">please fill in this field</span>

<br>

<label for="userpassword">Password</label>
<input type="password" id="userpassword" name="userpassword">

<br>

<input type="submit" id="usersubmit" onsubmit="myFunction();">
</form>


CSS Code:

#userspan {
display:none;
}


Javascript:

var username = document.getElementById("username").value;
var userpassword = document.getElementById("userpassword").value;
var userspan = document.getElementById("userspan");
var var usersubmit = document.getElementById("usersubmit");


function myFunction() {
if ( username == "" || userpassword == "" ) {
userspan.style.display="block";
return false;
}else {
return true;
}
}

Answer

Change the submit input box to:

    <input type="button" id="usersubmit" onclick="myFunction();">

and add to end of your myFunction() declaration before the return true declaration.

    document.getElemenById("username").form.submit();

... The reason is because the submit input button will submit the form no matter what, where as if you use the button input type, it does not submit the form, and you can then control when the form is submitted from within myFunction()

You also have in the code:

var var usersubmit = document.getElementById("usersubmit");

which says var var usersubmit

Example of Javascript:

<script>
  function myFunction() {
    var username = document.getElementById("username").value;
    var userpassword = document.getElementById("userpassword").value;
    if ((username == "") || (userpassword == "")) {
      userspan.style.display = "block";
      return false;
    } else {
      document.getElementById("username").form.submit();
      return true;
    }
  }
</script>
<form action="#" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <span id="userspan">please fill in this field</span>

  <br>

  <label for="userpassword">Password</label>
  <input type="password" id="userpassword" name="userpassword">

  <br>

  <input type="button" id="usersubmit" onclick="myFunction();" value="submit">
</form>

Another way without using any javascript:

  <form action="#" method="post">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>
      <span id="userspan">please fill in this field</span>

      <br>

      <label for="userpassword">Password</label>
      <input type="password" id="userpassword" name="userpassword" required>

      <br>

      <input type="submit" id="usersubmit" >
    </form>

Comments