CODEWITHSUNDEEP
javascriptforms
NoName84
NoName84

Reputation: 407

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;
    }
}

Upvotes: 2

Views: 130

Answers (2)

Raeesh Alam
Raeesh Alam

Reputation: 3480

Replace onsubmit event with return like this

Change

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

to

<form action="#" onsubmit="return myFunction();" method="post">


function myFunction() {
	var username = document.getElementById("username").value;
	var userpassword = document.getElementById("userpassword").value;
	var useralert = document.getElementById("username_required");
	var passalert = document.getElementById("password_required");

  if (username=="" && userpassword=="") {
  	useralert.style.display="block";
  	passalert.style.display="block";
    return false;
  }
  else if (username!='' && userpassword=="") {
  	useralert.style.display="none";
  	passalert.style.display="block";
    return false;
  }
  else if (username=='' && userpassword!="") {
  	useralert.style.display="block";
  	passalert.style.display="none";
    return false;
  }
  else {
  	useralert.style.display="none";
  	passalert.style.display="none";
  	alert('Your records has been submit!');
    return true;
  }
}
.alert {
    	display:none;
    	color: red;
		}
<form action="#" onsubmit="return myFunction();" method="post">
	<table border="0" cellpadding="5" cellspacing="1">
		<tr>
			<td valign="top"><label for="username">Username :</label></td>
			<td>
				<input type="text" id="username" name="username">
				<span class="alert" id="username_required">Please fill in this field</span>
			</td>
		</tr>
		<tr>
			<td valign="top"><label for="userpassword">Password :</label></td>
			<td>
				<input type="password" id="userpassword" name="userpassword">
	    	<span class="alert" id="password_required">Please fill in this field</span>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" id="usersubmit" value="Submit"></td>
		</tr>
	</table>
</form>

Upvotes: 0

mike510a
mike510a

Reputation: 2168

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>

Upvotes: 1

Related Questions