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”的表单之前。这意味着在元素存在于DOM内部之前解析并运行此javascript代码。

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

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

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

无法让jQuery验证工作

1 个答案: