无法让jQuery验证工作

我使用的是php和CodeIgniter。我在这两个（职业生涯VB.Net和C＃开发人员）的新手。然而，试图创建一个基本的注册表单，我很难让jQuery验证工作。无法让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验证。有人能告诉我我做错了什么吗？谢谢。

来源

2016-03-08 XstreamINsanity

有点太长的评论，但不知道它是唯一的问题。我看到的第一件事情是，

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

位于使用id =“的createAccount”的形式之前。这意味着这个JavaScript代码在DOM中的元素存在之前被解析和运行。

为了办好这个JS的DOM加载时，你则需要将其包装成这个特定的jQuery部分：

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

（理想情况下，你把所有的JS在页面的结束，前关闭</body>标签）

来源

2016-03-08 21:00:08 Zimmi

这样做。真心感谢您的帮助。 – XstreamINsanity

@XstreamINsanity它帮了大忙！你是最受欢迎的。 – Zimmi

无法让jQuery验证工作

回答

相关问题