如何在不提交的情况下验证表单并使用 jquery mobile 和 Jquery 验证转到其他页面? [英] How do I validate a form without submitting and go to other page with jquery mobile and Jquery validation?

查看：24
本文介绍了如何在不提交的情况下验证表单并使用 jquery mobile 和 Jquery 验证转到其他页面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我试图验证一个 JQM 表单，它有 4 个部分并被分成不同的页面，所以在我验证第一部分之后，我想转到第二部分，如果表单有效.我正在尝试使用 JQuery.validate 插件进行验证，但它对表单没有任何响应.

PS:必须使用 JQuery.validation 插件

 
<div data-role="header" data-position="fixed"><h1 id="page2Header"></h1>
<div data-role="内容"><form id="sampleProperties"><label for="station">选择站点:</label><select name="station" id="station" onBlur="storeData(this.id,this.value)" required="true"><option value="50028000">Tanama River</option><option value="50010500">Rio Guajataca, Lares</option><option value="60008002">示例 River2</option><option value="60008003">示例 River3</option><option value="60008004">示例 River4</option></选择><div class="隐藏">
<label for="sampleMediumDropdown">选择样本介质:</label><select name="sampleMediumDropdown" id="sampleMediumDropdown" onBlur="storeData(this.name,this.value)"><option value="WS">WS(地表水)</option><option value="WSQ">WSQ(Surface Water QC)</option></选择>
<label for="sampleMediumDropdownBottom">选择样本介质</label><select name="sampleMediumDropdown" id="sampleMediumDropdownBottom" onBlur="storeData(this.name,this.value)"><option value="SB">SB(底部材质)</option><option value="SBQ">SBQ(底料QC)</option></选择>

<label for="date">开始日期:</label><input name="date" id="beginDate" type="date" onChange="storeData(this.id,this.value)"/><div class="隐藏"><label for='EVENT'>水文事件:</label><select name="EVENT" id="EVENT" onBlur="storeData(this.name,this.value)"><option value="1">1-干旱</option><option value="2">2-溢出</option><option value="3">3-调节流量</option><option value="4">4-融雪</option><option value="5">5-地震</option><option value="6">6-飓风</option><option value="7">7-洪水</option><option value="8">8- 火山活动</option><option value="9" selected>9-例行采样</option><option value="A">A-春季分手</option><option value="B">B- 冰盖下</option><option value="C">C-冰川湖爆发</option><option value="D">D-Mudflow</option><option value="E">E-潮汐行动</option><option value="F">F-火，受火前采样影响</option><option value="H">H- Dambreak</option><option value="J">J-Storm</option><option value="K">K-回水</option><option value="X">X- 不适用</option></选择>

<div class="ui-grid-a"><label for="containerCuantity">添加一组单个容器或一组多个样本:</label><div class="ui-block-a"><input type="number" min="1" value="1" max="40" id="containerCuantity" name="containerCuantity" onBlur="storeData(this.id,this.value)"/>

<div class="ui-block-b"><select id="singleMultiContainer" name="singleMultiContainer" onChange="storeData(this.id,this.value)"><option value="" selected>--选择容器或设置--</option><option value="single">单容器示例</option><option value="multi">多组容器</option></选择>

<input id='addSampleParameters'type="submit" value="Next"/></表单>

<div data-role="footer" data-position="fixed"><div data-inline="true" data-type="horizo​​ntal"><a href="#" data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="false" data-role="button">Menu</a><a id="addSampleParameters" data-icon="arrow-r" data-iconpos="right" data-inline="true"data-role="button" data-mini="false" data-theme="e">下一步</a>

js:

$('#page2').bind('pageinit',function(){$('#sampleProperties').validate({规则:{车站:'必需'，日期:'必需'，singleMultiContainer: '必需',容器数量:{要求:'真'，最小长度:1，最大长度:40}},提交处理程序:函数(表单){alert('成功！');}});});

解决方案

有多种处理阶梯形式的方法.

当我创建多步表单时，我为每个部分使用一组唯一的

标签.然后我使用 .valid() 方法 来测试该部分，然后再转到下一个.(不要忘记首先初始化插件；在 DOM 上的所有表单上调用 .validate().)

然后在最后一部分，我在每个表单上使用 .serialize() 并将它们连接成要提交的数据查询字符串.

这样的东西...

$(document).on('pageinit', function() {//jQuery Mobile 的 dom 就绪处理程序$('#form1').validate({//初始化表单 1//规则});$('#gotoStep2').on('click', function() {//转到第 2 步如果 ($('#form1').valid()) {//显示步骤 2 和隐藏步骤 1 的代码}});$('#form2').validate({//初始化表单 2//规则});$('#gotoStep3').on('click', function() {//转到第 3 步如果 ($('#form2').valid()) {//显示第 3 步和隐藏第 2 步的代码}});$('#form3').validate({ 初始化表单 3//规则，submitHandler:函数(表单){//序列化并连接所有表单的数据var data = $('#form1').serialize() + '&'+ $('#form2').serialize() + '&'+ $(form).serialize()//ajax提交返回假；//阻止常规表单提交操作}});//没有第三个点击处理程序，因为插件会处理这个//使用最后一个表单上的内置 submitHandler 回调函数.});

重要的是要记住，我上面的 click 处理程序没有使用 type="submit" 按钮.这些是常规按钮，位于 form 标记的外部或 type="button".

只有最后一个表单上的按钮是常规的 type="submit" 按钮.那是因为我只在最后一个表单上利用插件的内置 submitHandler 回调函数.

概念证明"演示:http://jsfiddle.net/8bnZV/

顺便说一句，注意我是如何用更现代的 .on() 方法替换过时的 .bind() 方法的.

另外，请参阅参考:

https://stackoverflow.com/a/17975061/594235

So I'm trying to validate a JQM form that has 4 parts and are divided in different pages so after I validate the first part I want to go to the second, if the form it's valid. I'm trying to validate with the JQuery.validate plugin but it doesn't respond in any way with the form.

PS:IT MUST BE WITH JQuery.validation plugin

 <div data-role="page" id="page2" data-add-back-btn="true">
        <div data-role="header" data-position="fixed">
                <h1 id="page2Header"></h1>

        </div>
        <div data-role="content">

    <form id="sampleProperties">
                    <label for="station">Select Station:</label>
                    <select  name="station" id="station" onBlur="storeData(this.id,this.value)" required="true">
                        <option value="50028000">Tanama River</option>
                        <option value="50010500">Rio Guajataca, Lares</option>
                        <option value="60008002">Example River2</option>
                        <option value="60008003">Example River3</option>
                        <option value="60008004">Example River4</option>
                    </select>
                    <div class="hide">
                    <div class='suspendedAdditionalFields'>
                    <label for="sampleMediumDropdown">Select sample medium:</label>
                    <select name="sampleMediumDropdown" id="sampleMediumDropdown" onBlur="storeData(this.name,this.value)">
                        <option value="WS">WS(Surface Water)</option>
                        <option value="WSQ">WSQ(Surface Water QC)</option>
                    </select>
                    </div>
                    <div class='bottomAdditionalFields'>
                    <label for="sampleMediumDropdownBottom">Select sample medium</label>
                    <select name="sampleMediumDropdown" id="sampleMediumDropdownBottom" onBlur="storeData(this.name,this.value)">
                        <option value="SB">SB (bottom material)</option>
                        <option value="SBQ">SBQ (bottom material QC)</option>
                    </select>
                    </div>
                    </div>
                    <label for="date">Begin Date:</label>
                    <input name="date" id="beginDate" type="date" onChange="storeData(this.id,this.value)" />

                    <div class="hide">
                    <label for='EVENT'>Hydrologic event:</label>
                    <select name="EVENT" id="EVENT" onBlur="storeData(this.name,this.value)">
                        <option value="1">1- Drought</option>
                        <option value="2">2- Spill</option>
                        <option value="3">3- Regulated Flow</option>
                        <option value="4">4- Snowmelt</option>
                        <option value="5">5- Earthquake</option>
                        <option value="6">6- Hurricane</option>
                        <option value="7">7- Flood</option>
                        <option value="8">8- Volcanic activity</option>
                        <option value="9" selected>9- Routine Sample</option>
                        <option value="A">A- Spring breakup</option>
                        <option value="B">B- Under ice cover</option>
                        <option value="C">C- Glacial lake outbreak</option>
                        <option value="D">D- Mudflow</option>
                        <option value="E">E- Tidal action</option>
                        <option value="F">F- Fire, affected by fire prior sampling</option>
                        <option value="H">H- Dambreak</option>
                        <option value="J">J- Storm</option>
                        <option value="K">K- Backwater</option>
                        <option value="X">X- Not applicable</option>
                    </select>
                    </div>
                    <div class="ui-grid-a">
                     <label for="containerCuantity">Add a group of single container or sets of multiple samples: </label>    
                     <div class="ui-block-a">
                        <input type="number" min="1" value="1" max="40" id="containerCuantity" name="containerCuantity" onBlur="storeData(this.id,this.value)"/></div>
                     <div class="ui-block-b">
                        <select id="singleMultiContainer" name="singleMultiContainer"  onChange="storeData(this.id,this.value)">
                            <option value="" selected>--Select Container or Set--</option>
                            <option value="single">Single container sample</option>
                            <option value="multi">Multiple sets container</option>
                        </select>
                        </div>
                    </div>
                 <input id='addSampleParameters'type="submit"  value="Next"/>
                </form>
</div>
    <div data-role="footer" data-position="fixed">
        <div data-inline="true" data-type="horizontal"><a href="#" data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="false" data-role="button">Menu</a><a id="addSampleParameters" data-icon="arrow-r" data-iconpos="right" data-inline="true" data-role="button" data-mini="false" data-theme="e">Next</a>
        </div>
    </div>
</div>

The js:

$('#page2').bind('pageinit',function(){
  $('#sampleProperties').validate({
    rules:{
        station: 'required',
        date: 'required',
        singleMultiContainer: 'required',
        containerCuantity:{
            required:'true',
            minlength:1,
            maxlength:40
        }
    },
     submitHandler: function(form) {
                    alert('Success!');
                    }

  });
 });

解决方案

There are various approaches to stepped forms.

When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)

Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.

Something like this...

$(document).on('pageinit', function() { // dom ready handler for jQuery Mobile

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".

Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.

"Proof of Concept" DEMO: http://jsfiddle.net/8bnZV/

BTW, notice how I replaced your outdated .bind() with the more modern .on() method.

Also, see for reference:

https://stackoverflow.com/a/17975061/594235

这篇关于如何在不提交的情况下验证表单并使用 jquery mobile 和 Jquery 验证转到其他页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆