Maison > interface Web > js tutoriel > La combinaison de plug-ins jquery validate et jquery form implémente la soumission AJAX après validation du form_jquery

La combinaison de plug-ins jquery validate et jquery form implémente la soumission AJAX après validation du form_jquery

WBOY
Libérer: 2016-05-16 15:42:19
original
1195 Les gens l'ont consulté

Pour valider le formulaire et soumettre le formulaire sans l'actualiser, nous pouvons utiliser deux plug-ins utiles de jQuery - jquery validate.js et jquery form.js. Les détails sont expliqués ci-dessous.

1. jQuery validate.js. Pour parler franchement, cela signifie qu'une personne très noble a écrit la vérification de divers formulaires pour nous. fatiguant tous les jours, hehe.

2. jQuery form.js, "Ce plug-in vous permet de mettre à niveau simplement les formulaires soumis en HTML vers des formulaires soumis à l'aide de la technologie AJAX. Les principales méthodes du plug-in, ajaxForm et ajaxSubmit, Des informations peuvent être collectées à partir du composant de formulaire pour déterminer comment gérer le processus de soumission du formulaire. Les deux méthodes prennent en charge un grand nombre de paramètres facultatifs, vous permettant d'avoir un contrôle complet sur la soumission des données dans le formulaire. en utilisant AJAX, le processus ne pourrait pas être plus simple ! »

Veuillez consulter l'exemple de code ci-dessous :

Formulaire :

<form action="@Url.Action("AddColumns","Content")" method="post" id="AddColumnsForm">
 <div class="form-group js-EditCol" id="AddName">
 <label class="control-label">名称</label>
 <input name="Name" class="form-control" required />
 </div>
 <div class="form-group js-EditCol" id="AddRemark">
 <label class="control-label">备注</label>
 <input name="Remark" class="form-control" />
 </div>
 <div class="form-group js-EditCol" id="AddColumnTypeId">
 <label class="control-label">类型</label>
 <select class="form-control" name="ColumnTypeId" id="AddColumnTypeIdSel" required>
 </select>//下拉列表空置验证之要项目的Value值是空的就认为是空值
 </div> 
 <input type="submit" class="btn btn-primary" value="新增栏目" />
 <input type="reset" class="btn btn-default" value="清空" />
</form>
Copier après la connexion

javascript :

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 submitHandler: function(form) {
  $(form).ajaxSubmit();
 }
 });
});
Copier après la connexion

Je le renforcerai plus tard

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 submitHandler: function(form) {
  $(form).ajaxSubmit({
  success: function (result) { //表单提交后更新页面显示的数据
   $('#TreeTable').treegrid('reload');
   var d = result.split(';');
   ShowMsg(d[0], d[1], d[2]);
  }
  });
 }
 });
});
Copier après la connexion

Modifiez ensuite la position d'affichage du message d'erreur pour vous conformer au style bootstrap

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 errorPlacement: function (error, element) {//自定义错误信息显示操作,element是出错的input控件,error可以认为是是包含
Copier après la connexion

Le libellé du message d'erreur

  element.next('span.help-block').remove();
  element.after('<span class="help-block">' + error.text() + '</span>');
  element.parent().addClass("has-error");
 },submitHandler: function(form) {
  $(form).ajaxSubmit({
  success: function (result) {
   $('#TreeTable').treegrid('reload');
   var d = result.split(';');
   ShowMsg(d[0], d[1], d[2]);
  }
  });
 }
 });
Copier après la connexion

Le contenu ci-dessus présente la combinaison de plug-ins jquery.validate et jquery.form pour implémenter la soumission AJAX après avoir vérifié le formulaire. Veuillez me pardonner la mauvaise rédaction de cet article, merci.

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal