0

Hi,
I want to prevent submitting a form if any of the field is empty. also if possible I would like to validate some basic things. All I want to use JQuery: How do I do that? I have no way and google points me to plugins. The things I want to do are lightweight and I don't need plugin
Thanks

Here is my form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Login in Site</title> 
		<link rel="stylesheet" type="text/css" href="/loginsys/site.css" />
		<script type="text/javascript" src="/loginsys/lib/jquery.js">	</script>
		<script type="text/javascript" src="/loginsys/lib/form.js">	</script>
		
	</head> 

	<body>
        <form action="/loginsys/login.php" method="POST">
            <p></p>
            <table cellpadding="5px" id="form">
                    <tr>
                            <td>First Name:</td>
                            <td><input type="text" name="fname" /></td>
                    </tr>
                    <tr>
                            <td>Last Name:</td>
                            <td><input type="text" name="lname" /></td>
                    </tr>
                    <tr>
                            <td>Email:</td>
                            <td><input type="text" name="email" /></td>
                    </tr>
                    <tr>
                            <td>Username:</td>
                            <td><input type="text" name="usrname" /></td>
                    </tr>
                    <tr>
                            <td>Password:</td>
                            <td><input type="password" name="passwd" /></td>
                    </tr><tr>
                            <td></td>
                            <td><center><input type="submit" value="Login" /></center></td>
                    </tr>
            </table>
        </form>
	</body>

</html>
3
Contributors
7
Replies
10
Views
7 Years
Discussion Span
Last Post by Stefano Mtangoo
0
$(document).ready(function()
{
	$('#someform').submit(function ()
	{
		var i,
		    validate_fields = ['name', 'email', 'address'], // fields to validate
		    invalid_fields = []; // store of empty fields
		for (i in validate_fields)
		{
			// check if field is empty
			if ($('#' + validate_fields[i]).val().replace(/(^\s+|\s+$)/g, '') === '')
			{
				invalid_fields.push(validate_fields[i]);
			}
		}

		if (invalid_fields.length)
		{
			alert('The following fields were empty: ' + invalid_fields.join(', '));
			return false; // cancel the form submit
		}
		return true;
	});
});

Edited by ShawnCplus: n/a

0

You should first create a function that validates the input values, it returns true when they are all filled in and false when not. If you would also like to check wether they are according to a certain pattern (for example email xxx@xxx.xx), you could extend the function I wrote below with regExp() and such.

function checkInputs() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var usrname = document.getElementById("usrname").value;
var passwd = document.getElementById("passwd").value;
if (email != "" && lname != "" && email != "" && usrname != "" && passwd != "") {
return true;
} else {
alert("Not all the fields has been filled in!");
return false;
}
}

A few small adjustments to your form to make the function work:

<form action="/loginsys/login.php" method="post" onsubmit="return checkInputs();">
            <p></p>
            <table cellpadding="5px" id="form">
                    <tr>
                            <td>First Name:</td>
                            <td><input type="text" name="fname" id="fname" /></td>
                    </tr>
                    <tr>
                            <td>Last Name:</td>
                            <td><input type="text" name="lname" id="lname" /></td>
                    </tr>
                    <tr>
                            <td>Email:</td>
                            <td><input type="text" name="email" id="email" /></td>
                    </tr>
                    <tr>
                            <td>Username:</td>
                            <td><input type="text" name="usrname" id="usrname" /></td>
                    </tr>
                    <tr>
                            <td>Password:</td>
                            <td><input type="password" name="passwd" id="passwd"/></td>
                    </tr><tr>
                            <td></td>
                            <td><center><input type="submit" value="Login" /></center></td>
                    </tr>
            </table>
        </form>

~G

EDIT: Sorry, read past the jQuery part. Although my code probably works, ShawnCplus's matches your requirements of only jQuery :)

Edited by Graphix: n/a

0

Ok, I have already document.ready() doing many other things. I have put that but it submits he empty form. Here is my form.js

$(document).ready(function(){
//#########################Form ################################
	//text fields 
  //make form display yellow color when mouse is focused on item
  $('input[type="text"]').focus(
  function(){
  	$(this).addClass("focus"); 
  });//end of adding color 
  //remove after focus is gone 
   $('input[type="text"]').blur(
  function(){
  	$(this).removeClass("focus"); 
  });//end of removing color 
  
  //password fileds
  $('input[type="password"]').focus(
  function(){
  	$(this).addClass("focus"); 
  });//end of adding color 
  //remove after focus is gone 
   $('input[type="password"]').blur(
  function(){
  	$(this).removeClass("focus"); 
  });//end of removing color 
  //###########################End form ######################################

  //###########################Add form validation ###########################

	$('#loginform').submit(function ()
	{
		var i,
		    validate_fields = ['name', 'email', 'address'], // fields to validate
		    invalid_fields = []; // store of empty fields
		for (i in validate_fields)
		{
			// check if field is empty
			if ($('#' + validate_fields[i]).val().replace(/(^\s+|\s+$)/g, '') === '')
			{
				invalid_fields.push(validate_fields[i]);
			}
		}

		if (invalid_fields.length)
		{
			alert('The following fields were empty: ' + invalid_fields.join(', '));
			return false; // cancel the form submit
		}
		return true;
          //################################### End of form validation ###################################
	});
});
0

Do your inputs actually have the ids name email and address. You have to modify the code and your form to have the appropriate ids and the validate_fields array to match otherwise it's not doing anything :)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.