Question

我创建了这个使用jQuery验证的HTML表单。但是，我还没有找到任何验证警报。

这是我的Javascript代码：

<script src="jquery-1.9.1.js"></script>
<script src="jquery.validate.min.js"></script>
<script>
  $(function(){
    // Initialise le form
    $("#faq-form").validate({
        // Spécifier les réglements de validation 
        rules: {
            message:"required",
            adresse_mail:"required",
            slider:"required",
            radio-choice:"required",
            flip: "required"
        },

        // Specify the validation error messages
        messages: {
            message: "Votre question n'est pas validé",
            adresse_mail: "Votre est adresse mail n'est pas valide",
            slider: "votre age n'est pas rempli!",
            radio-choice: "Quel est votre sexe?",
            flip:"Est-ce-que vous communiquez LCF" 
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });

</script>

这是我的html表单：我已正确命名并识别所有字段。但我不知道为什么我不会看到任何验证警报消息。

<form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate">
    <input type="hidden" name="site" id="site" value="sis" required />
    <input type="email" name="adresse_mail" id="adresse_mail" />
    <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" />
    <fieldset data-role="controlgroup">
        <legend>Sexe<sup>*</sup></legend>
        <input type="radio" name="radio-choice" id="radio-choice" value="Homme" class="required">
        Homme<br />
        <input type="radio" name="radio-choice" id="radio-choice" value="Femme">
        Femme
    </fieldset>

    <select name="flip-10" id="flip" data-role="slider" data-theme="c">
        <option value="off">Non</option>
        <option value="on">Oui</option>
    </select>
    <button type="submit" name="submit">Valider</button>
</form>

任何人都可以帮我找出错误吗？

Answer 1

您的代码中存在语法错误。您不能在没有引号的情况下使用blah-blah属性名称。 Demo

    rules: {
        message:"required",
        adresse_mail:"required",
        slider:"required",
        "radio-choice":"required", //notice ""
        flip: "required"
    },

Answer 2

请将名称radio-choice更改为radio_choice，或者如果您想保持名称相同，请在js部分中用引号括起名称，例如＆＃34; radio-choice＆＃34;

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>


        <script>
            $(function() {
                // Initialise le form
                $("#faq-form").validate({
                    // Spécifier les réglements de validation 
                    rules: {
                        message: "required",
                        adresse_mail: "required",
                        slider: "required",
                        radio_choice: "required",
                        flip: "required"
                    },
                    // Specify the validation error messages
                    messages: {
                        message: "Votre question n'est pas validé",
                        adresse_mail: "Votre est adresse mail n'est pas valide",
                        slider: "votre age n'est pas rempli!",
                        radio_choice: "Quel est votre sexe?",
                        flip: "Est-ce-que vous communiquez LCF"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            });

        </script>
    </head>
    <body>
        <form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate">
            <input type="hidden" name="site" id="site" value="sis" required/>
            <input type="email" name="adresse_mail" id="adresse_mail" />
            <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" />
            <fieldset data-role="controlgroup">
                <legend>Sexe<sup>*</sup></legend>
                <input type="radio" name="radio_choice" value="Homme" class="required"> Homme<br />
                <input type="radio" name="radio_choice"  value="Femme"> Femme
            </fieldset>

            <select name="flip-10" id="flip" data-role="slider" data-theme="c">
                <option value="off">Non</option>
                <option value="on">Oui</option>
            </select>
            <button type="submit" name="submit">Valider</button>

        </form>


    </body>
</html>

Answer 3

你不能使用' - '作为属性名称，请检查这个小提琴：http://jsfiddle.net/kk9qge9b/

<form action="traitement_formulaire2.php" method="POST" id="faq-form" novalidate="novalidate">
    <input type="hidden" name="site" id="site" value="sis" required />
    <input type="email" name="adresse_mail" id="adresse_mail" />
    <input type="range" name="slider" id="slider" value="18" min="1" max="99" data-theme="c" />
    <fieldset data-role="controlgroup">
        <legend>Sexe<sup>*</sup></legend>
        <input type="radio" name="radiochoice" id="radiochoice" value="Homme" class="required">
        Homme<br />
        <input type="radio" name="radiochoice" id="radiochoice" value="Femme">
        Femme
    </fieldset>

    <select name="flip-10" id="flip" data-role="slider" data-theme="c">
        <option value="off">Non</option>
        <option value="on">Oui</option>
    </select>
    <button type="submit" name="submit">Valider</button>
</form>

JS：

$(document).ready(function() {
    // Initialise le form
    $("#faq-form").validate({
        // Spécifier les réglements de validation 
        rules: {
            message:"required",
            adresse_mail:"required",
            slider:"required",
            radiochoice:"required",
            flip: "required"
        },

        // Specify the validation error messages
        messages: {
            message: "Votre question n'est pas validé",
            adresse_mail: "Votre est adresse mail n'est pas valide",
            slider: "votre age n'est pas rempli!",
            radiochoice: "Quel est votre sexe?",
            flip:"Est-ce-que vous communiquez LCF" 
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });

JQuery验证表单不起作用

3 个答案: