具有JavaScript表单验证和JQuery Mobile的HTML

本文介绍了具有JavaScript表单验证和JQuery Mobile的HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在HTML表单中，我使用JavaScript表单验证来避免空白字段.这是表单的代码:

In a HTML form I am using JavaScript Form validation to avoid empty fields. This is the code for the form:

 <form method="post" name="form1" onsubmit="return validateForm()" action="<?php echo $editFormAction; ?>">
        <table align="center">
          <tr valign="baseline">
            <td nowrap align="right">Nickname:</td>
            <td>
              <input type="text" name="nickname" value="" size="32">
            </td>
          </tr>
          <tr valign="baseline">
            <td nowrap align="right">Email:</td>
            <td><input type="text" name="email" value="" size="32"></td>
          </tr>
          <tr valign="baseline">
            <td nowrap align="right">Password:</td>
            <td><input type="text" name="password" value="" size="32"></td>
          </tr>
          <tr valign="baseline">
            <td nowrap align="right">&nbsp;</td>
            <td><input type="submit" value="Insert record"></td>
          </tr>
        </table>
        <input type="hidden" name="estado" value="0">
        <input type="hidden" name="MM_insert" value="form1">
      </form>

这是JavaScript函数:

And this is the JavaScript function:

<script>
function validateForm()
{
var x=document.forms["form1"]["nickname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
</script>

如预期的那样，如果用户单击提交按钮，并且字段昵称"为空，则会显示警报对话框"，但是在关闭对话框之后，将提交表单.我在网站中使用Dreamweaver作为编辑器和JQuery Mobile，这可能是问题所在.

As expected, if the user clicks on the submit button and the field 'nickname' is empty, the Alert Dialog is shown, but after closing it, the form is submitted. I am using Dreamweaver as editor and JQuery Mobile in my web, may be this is the problem.

欢迎任何帮助.

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <form method="post" id="form1" name="form1"  action="" data-ajax="false">
                    <table align="center">
                        <tr valign="baseline">
                            <td nowrap align="right">Nickname:</td>
                            <td>
                                <input type="text" name="nickname" value="" size="32"/>
                            </td>
                        </tr>
                        <tr valign="baseline">
                            <td nowrap align="right">Email:</td>
                            <td><input type="text" name="email" value="" size="32"/></td>
                        </tr>
                        <tr valign="baseline">
                            <td nowrap align="right">Password:</td>
                            <td><input type="text" name="password" value="" size="32"/></td>
                        </tr>
                        <tr valign="baseline">
                            <td nowrap align="right">&nbsp;</td>
                            <td><input type="submit" value="Insert record"/></td>
                        </tr>
                    </table>
                    <input type="hidden" name="estado" value="0"/>
                    <input type="hidden" name="MM_insert" value="form1"/>
                </form>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>
        <div data-role="page" id="second" data-theme="a" >
            <div data-role="header">
                <h3>
                    Second Page
                </h3>
                <a href="#index" class="ui-btn-left">Back</a>
            </div>

            <div data-role="content">

            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>
    </body>
</html>

JavaScript:

$(document).on('submit', '#form1', function(){
    var x=document.forms["form1"]["nickname"].value;
    if (x==null || x=="") {
        alert("First name must be filled out");
        return false;
    } else {
        return true;
    }
});

更改:

jQuery Mobile具有自己的表单处理方式，如果要进行经典的表单处理，则需要禁用它.这是通过属性 data-ajax ="false" 完成的.
永远不要在jQuery Mobile中使用内联javascript，我的意思是永远不要.

Changes:

jQuery Mobile has its own way of form handling, you need to disable it if you want to have classic form handling. It is done via attribute data-ajax="false".
Never use inline javascript with jQuery Mobile, I mean NEVER.

这篇关于具有JavaScript表单验证和JQuery Mobile的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Mobile的HTML