validation du formulaire jEasyUI

Ce tutoriel va vous montrer comment valider un formulaire. Le framework easyui fournit un plug-in validatebox pour valider un formulaire. Dans ce tutoriel, nous allons créer un formulaire de contact et appliquer le plugin validatebox pour valider le formulaire. Vous pourrez ensuite adapter ce formulaire à vos besoins.

Créons un formulaire

Créons un formulaire de contact simple avec les champs nom, email, sujet et message :

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

Ajoutons un Le style s'appelle easyui- validatebox à la balise d'entrée, de sorte que la balise d'entrée appliquera la validation en fonction de l'attribut validType.

Empêcher la soumission du formulaire lorsque le formulaire n'est pas valide

Lorsque l'utilisateur clique sur le bouton d'envoi du formulaire, nous devons empêcher la soumission du formulaire s'il est invalide.

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

Si le formulaire n'est pas valide, un message s'affichera.

Télécharger l'instance jQuery EasyUI

jeasyui-form-form3.zip