Блог

Я хочу выполнить проверку jQuery в форме перед отправкой в AJAX. Здесь следует отметить, что мое приложение находится в ASP.NET Реализованы веб-формы с главными страницами, и у меня уже есть форма с runat=»server» на моей главной странице.

На моей странице содержимого форма выглядит так

 <form class="form-horizontal form-bordered" id="PageForm">
                    <div class="form-group">
                        <label for="DesignationName" class="col-lg-4 col-sm-2 control-label">Designation Name</label>
                        <div class="col-lg-8">
                            <input id="DesignationName" ng-model="newDesignation.DesignationName" type = "text" class="form-control"  placeholder="" >
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-lg-4 col-sm-2 control-label">Designation Short Name</label>
                        <div class="col-lg-8">
                            <input id="DesignationShortName" ng-model="newDesignation.DesignationShortName" type = "text" class="form-control"  placeholder="" >
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-lg-4 col-sm-2 control-label">Designation Order</label>
                        <div class="col-lg-8">
                            <input id="DesignationOrder" ng-model="newDesignation.DesignationOrder" type = "text" class="form-control"  placeholder="" >
                        </div>
                    </div>


                        <div class="form-group">
                                    <label class="col-sm-4 control-label">Administrative Department</label>


                                    <div class="col-sm-8">

                                        <select class="form-control" id="DivisionId" data-ng-options="d.DivisionId as d.DivisionName for d in divisions"  data-ng-model="newDesignation.DivisionId">
                                            <option value="">Please select</option>
                                        </select>
                                        <span class="mandatoryFieldMarker">*</span>

                                    </div>
                       </div>



                    <div class="btn-list" style="text-align: right; margin-right: 1.5%">

                            <button id="SaveBtn" type="submit" value="Save" class="btn btn-primary" data-ng-clickkk="save()"><i class="fa fa-check"></i> Save</button>
                            <a class="btn btn-danger" data-ng-click="cancel()"><i class="fa fa-trash-o"></i> Cancel</a>

                    </div>
</form>
  

Как вы можете видеть, я использовал здесь много директив AngularJS, потому что в конечном итоге я хочу выполнить отправку AJAX.

В моем контроллере AngularJS у меня есть этот код

 jQuery(document).ready(function() {


    jQuery("#SaveBtn").click(function (e) {

        e.preventDefault();

        alert(456);

        jQuery("#PageForm").validate({
            rules: {
                DesignationName: {
                    required: true,
                    minlength: 5,
                    maxlength: 200
                },
                DesignationShortName: {
                    minlength: 1,
                    maxlength: 50
                },
                DesignationOrder: {
                    required: true,
                    digits: true,
                    min: 1,
                    max: 1000000
                },
                DivisionId: {
                    required: true
                }
            },
            messages: {
                DesignationName: {
                    required: "Please specify designation name",
                    minlength: "Designation name must be between 5 and 200 characters",
                    maxlength: "Designation name must be between 5 and 200 characters"
                },
                DesignationShortName: {
                    minlength: "Designation short name must be between 1 and 50 characters",
                    maxlength: "Designation short name must be between 1 and 50 characters"
                },
                DesignationOrder: {
                    required: "Please specify designation order",
                    digits: true,
                    min: "Designation order must be betwen 1 and 1000000",
                    max: "Designation order must be betwen 1 and 1000000"
                },
                DivisionId: {
                    required: "Please select administrative division"
                }
            },
            submitHandler: function (form) {


                /////////////
            }
        });


    });



});
  

Проблема в том, что когда я отправляю свою форму, я получаю предупреждение 456, но проверка jQuery не запускается, и данные также не сохраняются (т. Е. Обработчик отправки также не запускается)

Я впервые использую проверку jQuery, поэтому я действительно не знаю, что делать.

Вся ваша проблема заключается в попытке использовать click обработчик и предотвращении поведения по умолчанию…

 jQuery(document).ready(function() {

    jQuery("#SaveBtn").click(function (e) {

        e.preventDefault();

        alert(456);

        jQuery("#PageForm").validate({
            ....
  

Плагин jQuery Validate автоматически фиксирует событие нажатия любой type="submit" кнопки, поэтому все, что вам нужно сделать, это инициализировать плагин, а остальное происходит автоматически…

 jQuery(document).ready(function() {

    jQuery("#PageForm").validate({ 
        ...
  

Редактировать:

Кроме того, для этого плагина name атрибут является обязательным для каждого input , и .validate() метод должен использовать его name в rules amp; messages objects .

 jQuery("#PageForm").validate({
    rules: {
        DesignationName: { // <- MUST be the NAME attribute
            ....
  

ДЕМОНСТРАЦИЯ: jsfiddle.net/06q8sxa3 /