无法使 jQuery 验证工作

Question

我正在使用 php 和 CodeIgniter。我在这两个方面都是新手（职业 VB.Net 和 C# 开发人员）。但是，在尝试创建基本注册表单时，我很难使 jQuery 验证正常工作。

header.php

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?><!DOCTYPE html>
<html>
    <head>
        <?php if(isset($title)) {?>
            <title>Discuss Cards - <?php echo $title ?></title>
        <?php } else { ?>
            <title>Discuss Cards</title>
        <?php } ?>
        <link rel="stylesheet" href="<?php echo base_url();?>styles/forum.css" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">    </script>
        <script src="<?php echo base_url();?>js/jquery.validate.min.js"></script>
    </head>
    <body>
        <?php if(isset($title)) {?>
            <h1><?php echo $title?></h1>
        <?php } ?>
        <?php if (isset($page_description)) {?>
            <p id="page_description"><?php echo $page_description?></p>
        <?php } ?>

create.php

        <script>
            $("#createaccount").validate();
        </script>
        <?php $attributes = array('id'=>'createaccount');
                    echo form_open('user/create_account',$attributes); ?>
                <?php echo form_label('Email','txtEmail');?>
                <br />
                <?php $data = array('type'=>'email','name'=>'txtEmail','id'=>'txtEmail','maxlength'=>'50','minlength'=>'2');
                            echo form_input($data); ?>
                <br /><br />
                <?php echo form_label('Username','txtUsername');?>
                <br />
                <?php $data = array('name'=>'txtUsername','id'=>'txtUsername','maxlength'=>'50','minlength'=>'5');
                            echo form_input($data); ?>
                <br /><br />
                <?php echo form_label('Password','pswPassword');?>
                <br />
                <?php $data = array('name'=>'pswPassword','id'=>'pswPassword');
                            echo form_password($data); ?>
                <br /><br />
                <?php echo form_label('Confirm Password','pswConfirmPassword');?>
                <br />
                <?php $data = array('name'=>'pswConfirmPassword','id'=>'pswConfirmPassword');
                            echo form_password($data); ?>
                <br /><br />
                <input type="submit" value="Register" name="Register"  />
        <?php echo form_close();?>

footer.php

        <strong>&copy; 2016</strong>
    </body>
</html>

结果...

<!DOCTYPE html>
<html>
    <head>
        <title>Discuss Cards - Create New Account</title>
        <link rel="stylesheet" href="http://[::1]/forum/styles/forum.css" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://[::1]/forum/js/jquery.validate.min.js"></script>
    </head>
    <body>
        <h1>Create New Account</h1>
        <script>
            $("#createaccount").validate();
        </script>
        <form action="http://[::1]/forum/index.php/user/create_account" id="createaccount" method="post" accept-charset="utf-8">
            <label for="txtEmail">Email</label>
            <br>
            <input type="email" name="txtEmail" value id="txtEmail" maxlength="50" minlength="2">
            <br>
            <br>
            <label for="txtUsername"></label>
            <br>
            <input type="text" name="txtUsername" value id="txtUsername" maxlength="50" minlength="5">
            <br>
            <br>
            <label for="pswPassword">Password</label>
            <br>
            <input type="password" name="pswPassword" value id="pswPassword">
            <br>
            <br>
            <label for="pswConfirmPassword">Confirm Password</label>
            <br>
            <input type="password" name="pswConfirmPassword" value id="pswConfirmPassword">
            <br>
            <br>
            <input type="submit" value="Register" name="Register">
        </form>
        <strong>© 2016</strong>
    </body>
</html>

现在，js 和 css 文件的链接是正确的。我使用了 http://jqueryvalidation.org/documentation/:

中的示例

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

但是，我觉得我错过了一些东西，因为它不起作用。当我使用他们的演示 (http://jqueryvalidation.org/files/demo/) 时，在显示错误的输入区域下创建了一个新标签。然而，当我测试我的代码时（Notepadd++，最新版本 Google Chrome，WAMPServer 2.5），我只得到 Chrome 验证。有人可以指出我做错了什么吗？谢谢。

Answer 1

评论有点太长了，但不确定这是否是唯一的问题。我首先看到的是

<script>
    $("#createaccount").validate();
</script>

位于 id="createaccount" 的表单之前。这意味着此 javascript 代码在元素存在于 DOM 之前被解析并且运行。

为了在加载 DOM 时运行这个 JS，你需要将它包装到这个特定的 jquery 部分：

$( document ).ready( function( ) {
    $("#createaccount").validate();
}

（理想情况下，您将所有 JS 放在页面末尾，结束 </body> 标记之前）

无法使 jQuery 验证工作

Unable to get jQuery validation to work

php

validation

jquery

codeigniter

wampserver