jQuery EasyUI Forms - Form Validation
This tutorial will show you how to validate a form. easyui validatebox framework provides a plug-in to validate a form. In this tutorial, we will create a contact form, and apply validatebox plug-in to verify the form. You can then adjust according to their own needs to the form.
Create a form (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> & Lt; textarea name = "message" style = "height: 60px;" & gt; & lt; / textarea & gt; </ Div> <Div> <Input type = "submit" value = "Submit"> </ Div> </ Form>
We add a style called easyui-validatebox to input tag, so the input verification mark will be applied according to validType property.
Prevent form submission when the form is invalid
When the user clicks the submit form button, if the form is not valid, we should stop form submission.
$ ( '# Ff'). Form ({ url: 'form3_proc.php', onSubmit: function () { return $ (this) .form ( 'validate'); }, success: function (data) { $ .messager.alert ( 'Info', data, 'info'); } });
If the form is not valid, a message will be displayed.