Sunday 20 February 2011

JQ Forms with AJAX-JSP3

There are three slightly different examples of validation here. The first uses the forData array.


FIRST EXAMPLE:
--------------

Sample3_1.jsp
-------------
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
var x=0;
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm1').ajaxForm( { beforeSubmit: validate } );
});
function validate(formData, jqForm, options) {
// formData is an array of objects representing the name and value of each field
// that will be sent to the server; it takes the following form:
//
// [
// { name: username, value: valueOfUsernameInput },
// { name: password, value: valueOfPasswordInput }
// ]
//
// To validate, we can examine the contents of this array to see if the
// username and password fields have values. If either value evaluates
// to false then we return false from this method.
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('Please enter a value for both Username and Password');
return false;
}
}
alert('Both fields contain values.');
}
</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>formData</code> Argument</h3>
<form id="validateForm1" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>
</div>

</body>
</html>

dummy.jsp
---------
<%--
Document : dummy
Created on : 19.?ub.2011, 09:30:16
Author : Ali Riza SARAL
--%>
<%
out.print("Hello world");
%>


The second uses the jqform element to acces the DOM elemnts directly.


SECOND EXAMPLE:
---------------

Sample3_2.jsp
-------------
<%--
Document : sample3
Created on : 19.Şub.2011, 10:38:01
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm2').ajaxForm( { beforeSubmit: validate } );
})

function validate(formData, jqForm, options) {
// jqForm is a jQuery object which wraps the form DOM element
//
// To validate, we can access the DOM elements directly and return true
// only if the values of both the username and password fields evaluate
// to true

var form = jqForm[0];
if (!form.username.value || !form.password.value) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}

</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>jqForm</code> Argument</h3>
<form id="validateForm2" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>
</div>

</body>
</html>


The third example uses the fieldValue is a Form Plugin method.

THIRD EXAMPLE:
--------------

Sample3_3.jsp:
--------------
<%--
Document : sample3
Created on : 19.Şub.2011, 10:38:01
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind form using ajaxForm
$('#validateForm3').ajaxForm( { beforeSubmit: validate } );
})

function validate(formData, jqForm, options) {
// fieldValue is a Form Plugin method that can be invoked to find the
// current value of a field
//
// To validate, we can capture the values of both the username and password
// fields and return true only if both evaluate to true

var usernameValue = $('input[name=username]').fieldValue();
var passwordValue = $('input[name=password]').fieldValue();

// usernameValue and passwordValue are arrays but we can do simple
// "not" tests to see if the arrays are empty
if (!usernameValue[0] || !passwordValue[0]) {
alert('Please enter a value for both Username and Password');
return false;
}
alert('Both fields contain values.');
}
</script>
</head>
<body>
<div id="sample3">
<h3>Validate Using the <code>fieldValue</code> Method</h3>
<form id="validateForm3" action="dummy.jsp" method="post"><div>
Username: <input type="text" name="username" />
Password: <input type="password" name="password" />
<input type="submit" value="Submit" />
</div></form>


</div>

</body>
</html>
Posted by at