web-dev-qa-db-fra.com

Comment valider correctement un formulaire modal

Je n'arrive pas à obtenir de validation pour travailler sur mon modal bootstrap, j'ai eu du mal avec plusieurs exemples que j'ai rencontrés.

Quelle est la bonne façon de valider un modal bootstrap?

Mon HTML:

 <div class="modal fade" id="addMyModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Stuff</h4>
            </div>
            <div class="modal-body">
                <form class="form-control" role="form" id="newModalForm">
                    <div class="form-group">
                        <label class="control-label col-md-3" for="email">A p Name:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control required error" id="pName" name="pName" placeholder="Enter a p name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3" for="email">Action:</label>
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="action" placeholder="Enter and action">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btnSaveIt">Save</button>
                <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Mon Javascript:

$(function () {        

    $("#newModalForm").validate({
        rules: {
            pName: {
                required: true,
                minlength: 8
            },
            action: "required"
        },
        messages: {
            pName: {
                required: "Please enter some data",
                minlength: "Your data must be at least 8 characters"
            },
            action: "Please provide some data"
        }
    });
});

Basé sur mon code, rien ne semble se passer lorsque je clique sur le bouton Enregistrer de modal. J'utilise le script jquery.validate.js.

Quelqu'un peut me diriger dans la bonne direction?

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
6
John Doe

Vous avez deux problèmes:

  1. Votre bouton doit être réglé sur type="submit" et non pas type="button". 

  2. Votre bouton d'envoi doit se trouver dans votre balise form.

Voir exemple de travail Snippet.

$(function() {

  $("#newModalForm").validate({
    rules: {
      pName: {
        required: true,
        minlength: 8
      },
      action: "required"
    },
    messages: {
      pName: {
        required: "Please enter some data",
        minlength: "Your data must be at least 8 characters"
      },
      action: "Please provide some data"
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Stuff</h4>
      </div>
      <div class="modal-body">
        <form role="form" id="newModalForm">
          <div class="form-group">
            <label class="control-label col-md-3" for="email">A p Name:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3" for="email">Action:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
            <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

9
vanburen

Si vous avez besoin d’envoyer des données via AJAX à partir de bootstrap modal, utilisez le code suivant:

$("#addMyModal form").validate({
		rules: {
		 	Name: {
			 	required: true,
			 	minlength: 2
		 },
		 	Email: {
			 	required: true,
			 	minlength: 5
		 },
		 	Phone: {
				required: true,
				minlength: 12
		 }
		},
		messages: {
		 	Name: {
			 	required: "Обязательное поле",
			 	minlength: "Минимальная длинна Имени 2 символа"
		 },
		 	Email: {
			 	required: "Обязательное поле",
			 	minlength: "Минимальная длинна Email 5 символов",
			 	email: "Пожалуйста введите корректный email адрес."
		 },
		 	Phone: {
			 	required: "Обязательное поле",
			 	minlength: "Минимальная длинна Телефона 11 символов"
		 }
		},
		submitHandler: function(form) {
            $.ajax({
                url: './pay-vip.php',
                type: 'POST',
                data: $(form).serialize(),
                success: function(response) {
                    location.replace(location + "pay-vip.php");
                    alert("Send mail")
                }            
            });
          }
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Stuff</h4>
      </div>
      <div class="modal-body">
        <form role="form" id="newModalForm">
          <div class="form-group">
            <label class="control-label col-md-3" for="email">A p Name:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3" for="email">Action:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
            <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

2
Nazar Lesyuk

J'ai eu un problème similaire. Mais il s'est avéré que

$("#newModalForm").validate({ ... });

doit être mis à l'extérieur du 

$(function () { });

Cela a résolu mon problème

1
I.Boras