Member Avatar for Stefano Mtangoo

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
  • 2K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Stefano Mtangoo
Member Avatar for ShawnCplus 
$(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 because: n/a
Member Avatar for Graphix

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 because: n/a
Member Avatar for Stefano Mtangoo

Thanks G and Shawn
I'm on implementing that!

Member Avatar for Stefano Mtangoo

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 ###################################
	});
});
Member Avatar for ShawnCplus

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 :)

Member Avatar for Stefano Mtangoo

hahaha! I didn't thought of that!
I'm changing ;)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.