jEasyUI form validation

This tutorial will show you how to validate a form. The easyui framework provides a validatebox plug-in to validate a form. In this tutorial, we will create a contact form and apply the validatebox plugin to validate the form. You can then adapt this form to suit your needs.

Create a form

Let’s create a simple contact form with name, email, subject and message fields:

	<div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
	<form id="ff" method="post">
		<div>
			<label for="name">Name:</label>
			<input class="easyui-validatebox" type="text" name="name" required="true"></input>
		</div>
		<div>
			<label for="email">Email:</label>
			<input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
		</div>
		<div>
			<label for="subject">Subject:</label>
			<input class="easyui-validatebox" type="text" name="subject" required="true"></input>
		</div>
		<div>
			<label for="message">Message:</label>
			<textarea name="message" style="height:60px;"></textarea>
		</div>
		<div>
			<input type="submit" value="Submit">
		</div>
	</form>

Let’s add a The style is named easyui-validatebox to the input tag, so the input tag will apply validation based on the validType attribute.

Prevent form submission when the form is invalid

When the user clicks the submit button of the form, if the form is invalid, we should prevent the form from being submitted.

	$('#ff').form({
		url:'form3_proc.php',
		onSubmit:function(){
			return $(this).form('validate');
		},
		success:function(data){
			$.messager.alert('Info', data, 'info');
		}
	});

If the form is invalid, a prompt message will be displayed.

Download jQuery EasyUI instance

jeasyui-form-form3.zip