無法讓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驗證工作

回答

相關問題