Question

首先披露信息，这是功课。

编辑：好的，所以我现在有插件工作，但只有数字和电子邮件地址之类的东西，默认的“总是需要”似乎不起作用，这有点重要。总而言之，如果我将表单元素的类设置为“class =”required“”它总是验证它是否有效，而如果我执行类似“class =”所需数字“”的验证工作正确。

旧文字：我需要在JQM站点上使用JQuery Validate插件，其中包含一个表单。通过学校的指令是我需要做的就是将一些表单元素的类更改为“required”或类似的东西，然后在表单上调用.validate。

好吧，我现在已经完成了几十次，我无法让它工作，所以也许我的代码中有一些东西导致了这个问题，这里是我的代码的相关部分：

作为一个说明，我实际上只在一周之前与JQM合作了一周，所以我为任何愚蠢的错误/邋iness道歉。）

表格：

<!--Add char form-->
<div data-role="page" id="add-item" data-theme="a" >
    <!--I decided to edit my form from the previous week to be more flexable and generic for use in many different RPGs, and not just Dungeons and Dragons, as it was before.-->

    <div data-role="header">
            <h1>Add New Character</h1>
        </div>
    <div data-role="content">
        <form action="" method="post" data-ajax="false" id="addCharForm">
            <fieldset data-role="controlgroup">
                <label for="dateCreated">Date Created:</label>
            <input type="date" id="dateCreated">
        </fieldset>

        <fieldset data-role="controlgroup">
                <label for="name">Age:</label>
            <input type="text" name="name" id="charAge" value="">
        </fieldset>

        <fieldset data-role="controlgroup">
            <label for="charName">Name:</label>
            <input type="text" id="charName" placeholder="Character Name" class="required">
        </fieldset>

        <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Choose character gender:</legend>
            <input type="radio" name="gender" id="radioMale" value="Male">
            <label for="radioMale">Male</label>

            <input type="radio" name="gender" id="radioFemale" value="Female">
            <label for="radioFemale">Female</label>
        </fieldset>

        <fieldset data-role="controlgroup">
            <label for="charAttrs">Describe your character's <b>attributes</b> in this field:</label>
            <textarea id="charAttrs"></textarea>
        </fieldset>
        <fieldset data-role="controlgroup">
            <label for="charSkills">Describe your character's <b>skills</b> in this field:</label>
            <textarea id="charSkills"></textarea>
        </fieldset>
        <fieldset data-role="controlgroup">
            <label for="charBio">Character Biography:</label>
            <textarea id="charBio"></textarea>
        </fieldset>
        <fieldset data-role="controlgroup">
            <label for="charRating">Rate Your Character:</label>
            <input type="range" name="charRating" id="charRating" value="100" min="0" max="100">
        </fieldset>

        <input type="submit" value="Submit Character" data-theme="b">
        <input type="button" id="testBtn" value="Test">
    </form>
    </div>
</div>

JS：

$('#add-item').on('pageinit', function(){
console.log("In init");

    var myForm = $('#addCharForm');
        myForm.validate({
        invalidHandler: function(form, validator) {
        },
        submitHandler: function() {
                    var data = myForm.serializeArray();
        //TODO storeData(data);
    }
});
});

任何帮助都将不胜感激。

Answer 1

我认为您必须在class="required"上加入<input>并按如下方式初始化您的表单：

$("#nameOfTheForm").validate();

JQuery Mobile验证插件“必需”无法正常工作

1 个答案: