使用 jquery 验证表单，然后通过 ajax 发送到 php

Question

我有一个小问题，我有带有引导验证器插件的引导表单和 ajax 发布脚本。我的问题是，我不知道如何设置一个条件，我必须达到这个条件才能启用提交按钮。

我想将我的提交按钮设置为默认禁用，如果每个输入都将被填充（使用引导验证器条件），那么 javascript 可以允许点击提交按钮。

感谢您的回答。

这是我的代码：

<script>
jQuery(document).ready(function() {
    jQuery('#requestquote').bootstrapValidator({
    	message: 'This value is not valid',
    	group: '.form-overenie',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: {
                message: 'Zadané meno nie je správne',
                validators: {
                    notEmpty: {
                        message: 'Prosím zadajte svoje meno'
                    },
                }
            },
            company: {
                message: 'Zadaný názov je neplatný',
                validators: {
                    notEmpty: {
                        message: 'Prosím napíšte názov spoločnosti'
                    },
                }
            },
            phone: {
                message: 'Zadané číslo je neplatné',
                validators: {
                	stringLength: {
                        min: 9,
                        message: 'Zadané číslo je príliš krátke'
                    },
                    notEmpty: {
                        message: 'Prosím zadajte svoje telefónne číslo'
                    },
                }
            },
            mailovaadresa: {
                message: 'Zadaný email nie je správny',
                validators: {
                    notEmpty: {
                        message: 'Prosím zadajte svoju emailovú adresu'
                    },
                }
            },
            projecttype: {
                message: 'Zadaný názov je neplatný',
                validators: {
                    notEmpty: {
                        message: 'Prosím zadajte typ projektu'
                    },
                }
            },
            budget: {
                message: 'Zadaný názov je neplatný',
                validators: {
                    notEmpty: {
                        message: 'Prosím zadajte približnú výšku rozpočtu'
                    },
                }
            },
            projectdescription: {
                validators: {
                	
                }
            },
        }
    });
});



jQuery(function () {

        jQuery('#requestquote').unbind('submit').bind('submit', function (e) {

          e.preventDefault();

          jQuery.ajax({
            type: 'post',
            url: 'forms/requestquote.php',
            data: jQuery('#requestquote').serialize(),
            success: function () {
              jQuery("#uspesne-odoslane").show();
              jQuery(".formular-potvrdit").hide();
              jQuery(".formular-riadok").hide();
              jQuery(".formular-zavriet").hide();
            }
          });
        });

      });
</script>

<form id="requestquote" action="forms/requestquote.php" method="post" style="width:85%;margin:0 auto;">
      	<div class="formular-riadok">
        <fieldset><div class="form-overenie" style="float:left;"><input type="text" name="name" placeholder="Meno" class="input-lava" /></div>
        <div class="form-overenie" style="float:right;"><input type="text" name="company" placeholder="Spoločnosť" class="input-prava" /></div>
        </div>
        <div class="formular-riadok">
        <div class="form-overenie" style="float:left;"><input type="text" name="phone" placeholder="Telefón" class="input-lava" /></div>
        <div class="form-overenie" style="float:right;"><input type="email" name="mailovaadresa" placeholder="E-mail" class="input-prava" /></div>
        </div>
        <div class="formular-riadok">
        <div class="form-overenie" style="float:left;"><select name="projecttype" class="input-lava" style="margin-bottom:30px;">
        	<option value="" disabled selected>Typ projektu</option>
        	<option value="webstranka">Web stránka</option>
        	<option value="eshop">E-shop</option>
        	<option value="portal">Portál</option>
        	<option value="forum">Fórum</option>
        	<option value="seo">SEO</option>
        	<option value="korporatnaidentita">Korporátna identita</option>
        	<option value="logo">Logo</option>
        	<option value="ine">Iné</option>
        </select></div>
        <div class="form-overenie" style="float:right;"><select name="budget" class="input-prava" style="margin-bottom:30px;">
        	<option value="" disabled selected>Rozpočet</option>
        	<option value="do500">do 500 €</option>
        	<option value="500az1000">500 € - 1 000 €</option>
        	<option value="1000az3000">1 000 € - 3 000 €</option>
        	<option value="3000az5000">3 000 € - 5 000 €</option>
        	<option value="5000az10000">5 000 € - 10 000 €</option>
        	<option value="10000az20000">10 000 € - 20 000 €</option>
        	<option value="nad20000">nad 20 000 €</option>
        </select></div>
        </div>
        <div class="formular-riadok">
        <div class="form-overenie" style="display:block;"><textarea name="projectdescription" placeholder="Stručný popis projektu" class="formular-textarea"></textarea></div>
        </div>
        <div class="formular-riadok" style="margin-top:30px;">
        <span class="formular-zavriet" data-dismiss="modal">Zatvoriť</span>
        <button type="submit" class="formular-potvrdit" disabled>Odoslať</button></fieldset>
        </div>
        
        <div id="uspesne-odoslane" data-dismiss="modal" hidden><h3><i class="fa fa-check-circle"></i>Správa bola úspešne odoslaná</h3></div>
      </form>

我禁用了我的提交按钮，但是当我点击 sumit 时，ajax 将在任何输入被填充时发送数据。

虽然我只有脚本的第一部分，但一切正常（只有在填写了每个输入时才允许我发送表单），但是当我添加 ajax 时，如果我只填写一个输入，它会将表单发送到 php ...

Answer 1

你应该使用：

data: jQuery('#requestquote').serializeArray(),

Serialize() 会给你类似查询字符串的东西