0

首先公开,这是功课。

编辑:好的,所以我现在可以使用插件,但仅适用于数字和电子邮件地址之类的东西,默认的“始终需要”似乎不起作用,这有点重要。综上所述,如果我将表单元素的类设置为“class="required"”,无论它是否有效,它都会始终进行验证,而如果我执行“class="required number"”之类的操作,则验证有效正确。

旧文本:我需要在 JQM 站点上使用 JQuery Validate 插件,其中包含一个表单。学校的指示是,我需要做的就是将一些表单元素的类更改为“必需”或类似的东西,然后只需在表单上调用 .validate 即可。

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

作为说明,在此之前我实际上只与 JQM 合作了大约一周,所以对于任何愚蠢的错误/马虎,我深表歉意。)

表格:

<!--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);
    }
});
});

任何帮助,将不胜感激。

4

1 回答 1

0

我认为您必须包含class="required"<input>初始化您的表单,如下所示:

$("#nameOfTheForm").validate();
于 2012-10-11T01:49:19.007 回答