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

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>

javascript :

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 submitHandler: function(form) {
  $(form).ajaxSubmit();
 }
 });
});

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]);
  }
  });
 }
 });
});

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可以认为是是包含

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]);
  }
  });
 }
 });

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.