Jquery移动表单验证工作不正常 [英] Jquery Mobile Form Validation not working properly

问题描述

HTML p>

 < div data-role =pageid =newevent1> 
< div data-role =header> 
< h1>新事件< / h1> 
< / div> 
< div data-role =content> 
< form id =newevent1infoname =newevent1infoalign =left> 
< div data-role =fieldcontain> 
< label for =ename>活动名称：< / label> 
< input align =righttype =textid =enamename =ename/> 
< / div> 
< div data-role =fieldcontain> 
< fieldset data-role =controlgroupdata-type =horizo​​ntal> 
< legend>日期：< / legend> 
< input type =dateid =datename =date/> 
< / fieldset> 
< / div> 
< div data-role =fieldcontain> 
< fieldset data-role =controlgroupdata-type =horizo​​ntal> 
< legend>时间：< / legend> 
< input type =timeid =timename =time/> 
< / fieldset> 
< / div> 
< div data-role =fieldcontain> 
< label for =descevent>说明：< / label> 
< input type =textid =desceventname =descevent/> 
< / div> 
< button type =submitname =submit>创建事件< / button> 
< / form> 
< / div> 
< / div> 
  

JAVASCRIPT

 <$ （$（this）.validate（{$ b $） b规则：{
 ename：{
 required：true 
}，
 descevent：{
 required：true 
}，
 date： {
 required：true 
}，
 time：{
 required：true 
}，
} 
}）.form（）） {
 
 alert（success）; 
 
} 
}）; 
  

我希望它只在所有表单数据有效时才提示成功。我需要解决什么问题？

解决方案

只要返回false 如果不正确。

$ b $

  $（'＃newevent1info'）。submit（function（event）{
 event.preventDefault（）; 
 if （$（this）.validate（{
 rules：{
 ename：{
 required：true 
}，
 descevent：{
 required：true 
}，
 date：{
 required：true 
}，
 time：{
 required：true 
}，
 } 
 alert（success）; 
} else {
 return false; 
} 
}）; 
  

The form should validate and if its not valid, the form should not proceed, but it is automatically transferring the app to another page...

HTML

<div data-role="page" id="newevent1">
<div data-role="header">
    <h1>New Event</h1>
</div>
<div data-role="content">
    <form id="newevent1info" name="newevent1info" align="left">
        <div data-role="fieldcontain">
            <label for="ename">Event Name:</label>
            <input align="right" type="text" id="ename" name="ename" />
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Date:</legend>
                <input type="date" id="date" name="date"/>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Time:</legend>
                <input type="time" id="time" name="time" />
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <label for="descevent">Description: </label>
            <input type="text" id="descevent" name="descevent"/>
        </div>
        <button type="submit" name="submit">Create Event</button>
    </form>
</div>
</div>

JAVASCRIPT

    $('#newevent1info').submit(function (event) {
event.preventDefault();

if ($(this).validate({
rules: {
ename: {
required: true
},
descevent: {
required: true
},
date: {
required: true
},
time: {
required: true
},
}
}).form()) {

alert("success");

}
});

i want it to only alert success if all the form data is valid. what do i need to fix?

解决方案

Simply return false if not true.

$('#newevent1info').submit(function (event) {
    event.preventDefault();
    if ($(this).validate({
        rules: {
            ename: {
                required: true
            },
            descevent: {
                required: true
            },
            date: {
                required: true
            },
            time: {
                required: true
            },
        }
    }).form()){
            alert("success");
        } else {
            return false;
        }
});

这篇关于Jquery移动表单验证工作不正常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！