2014-01-09 46 views
0

我是jquery和codeigniter的新手,但沒有編程我已經使用javascript做了一些驗證。 我想在我的項目中使用jQuery和驗證表單輸入plz幫助我一步一步如何在代碼點火器中包含jquery

。如何包含jquery?
。如何使用它來驗證表單?

<!DOCTYPE html> 
<html> 
<head> 
<title><?php echo $title; ?></title> 
</head> 
<body> 
    <form id="form" action="<?php echo $form_action; ?>" method="post"> 
<center><h1><?php echo $form_h1; ?></h1></center> 
<table width="800" border="1" bordercolor="BLUE" align="center" cellpadding="5" cellspacing="2"> 
</tr> 
<tr> 
<td> 
    <b>FirstName</b> 
</td> 
<td> 
    <input type="text" id="firstname" name="firstname"> 
    <span class="firstname_error_msg" style="color: #ff0000;"></span> 
</td> 
</tr> 
<tr> 
<td> 
    <b>LastName</b> 
</td> 
<td> 
    <input type="text" id="lastname" name="lastname"> 

</td> 
</tr> 
<tr> You can <em>not</em> use Markdown in here. 
<td> 
    <b>Address</b> 
</td> 
<td> 
    <input type="text" id="address" name="address" /> 
    <span class="address_error_msg" style="color: #ff0000;"></span> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Email Id</b> 
</td> 
<td> 
    <input type="text" id="email" name="email"/> 
    <span class="email_error_msg" style="color: #ff0000;"></span> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Password</b> 
</td> 
<td> 
    <input type="text" id="password" name="password" /> 
    <span class="password_error_msg" style="color: #ff0000;"></span> 
</td> 
</tr> You can <em>not</em> use Markdown in here. 
<tr> 
<td> 
    <b>Gender</b> 
</td> 
<td> 
    <select name="gender"> 
    <option value="M">Male</option> 
    <option value="F">Female</option> 
    </select> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Date Of Birth</b> 
</td> 
<td> 
    <input type="text" id="dob" name="dob" /> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Age</b> 
</td> 
<td> 
    <input type="text" name="age" /> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Zipcode</b> 
</td> 
<td> 
    <input type="text" id="zipcode" name="zipcode"/> 
    <span class="zipcode_error_msg" style="color: #ff0000;"></span> 
</td> 
</tr> 
<tr> 
<td> 
    <b>Mobile</b> 
</td> 
<td> 
    <input type="text" name="mobile"/> 
</td> 
</tr> 
<tr> 
<td colspan="100%" align="center" > 
    <input type="submit" id="submit" name="submit" value="Submit"/> 
    <input id="reset" type="reset" value="Reset"> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
+0

你會發現所有你的Javascript CI圖書館Integeration文檔中的需要:'ellislab.com /笨/用戶指南/庫/ javascript.html' –

回答

0

第1步

在頁面中使用jquery你需要太多在你的HTML頭添加此行(在你看來)

<head> 
    <script type="text/javascript"src="code.jquery.com/jquery-1.10.2.min.js"></script> 
</head> 

您可以找到要添加的有效地址;在jquery page的末尾。

第2步

測試jQuery的正確包含的代碼添加

<script> 
    $.(document).ready(function(){ alert("hello"); }); 
</script> 

如果警報顯示和螢火控制檯沒有顯示出任何錯誤。它包含正確。

第3步

可以用笨validaitor或jQuery的validiator驗證表單數據。爲每個提議使用這些參考。

validate with codeIgniter

validate with jquery

0

在您的代碼的頭部分只需複製粘貼下面給出的代碼。

<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> </script> 
0

您可以使用谷歌jquery網址。

對於本地文件,請在您的模板標題中使用以下代碼以包含在所有頁面中。

<script type="text/javascript" src="<?php echo base_url();?>js/jquery.js file"></script> 

然後,你現在可以使用任何jQuery驗證插件/工具。

以下網址嘗試演示和代碼:

http://www.position-relative.net/creation/formValidator/

http://www.position-relative.net/creation/formValidator/demos/demoValidators.html

+0

演示好但我需要示例代碼在我自己的項目中完成它。 – GauravGD