Question

我已经在jsfiddle中实施了fundtransfer的验证。它在jsfiddle中工作正常但在localhost中不起作用。我正在使用wamp。

这是我的jsfiddle链接 - http://jsfiddle.net/BzdfN/31/

但是当我在localhost.its中实现它时，无法正常工作。

我的HTML代码是

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="validate.js"></script>
<title> Infy Bank Fund Transfer Entry Page </title>
</head>
<body>
<table class="layout" border="0" width="90%" align="center">
<form name="addcust" method ="POST" action ="http://localhost:8080/myapp/jsp/AddCustomerJSP.jsp">
    <td colspan="2">
    <table border="0" width="70%" align="center">
<tr>
    <td align="center" colspan="2">
    <div class="heading2">Infy Bank</div>
    </td>
</tr>
<tr>
    <td align="center" colspan="2"><p class="heading3">Fund transfer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
    <td>Payers account no<span class="mandatory">*</span></td>
    <td><input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal"><a href="#" class="button button-green"></a></div>
    </td>
</tr>
<!--<tr>
    <td>Payees account no<span class="mandatory">*</span></td>
    <td>
        <input type="text" name="name" value=2008 maxlength="25">   
    </td>
</tr>
<tr>
    <td>Amount<span class="mandatory">*</span></td><td><input type="text" Value=500 name="state" maxlength="25"></td>
</tr>
<tr>
    <td>Description<span class="mandatory">*</span></td><td><input type="text" name="pin" value=self maxlength="6"></td>
</tr>
<tr>
    <td><span class="mandatory">*mandatory field</span></td>
    <td><input type="submit" name="AccSubmit" value="Submit" onClick="return validatebal();">
        <input type="reset" name="res" value="Reset"></td>
</tr>-->
</form>
</table>
<p align="right"><a href="homepage.html">Home</a></p>
</body>
</html>

我的validate.js是

 $("#text10").keyup(function(){
        $("#text10").blur();
        $("#text10").focus();
});
$("#text10").change(function(){
var name = $('#text10').val();
         var numbers = /^[0-9]+$/;   
         var specialChars = "<>@!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";



    if (name == "" || name == " " )
        {
             $("#equal").show();
             $("#equal a").html("please enter account number");

        }


    else if(name.match(numbers))
    {
               $("#equal").hide();
             $("#equal a").html("correct account number");   //  alert('All Boxes have elements.');
    }

    else if(name.match(specialChars))
    {
               $("#equal").show();
             $("#equal a").html("correct account number");   //  alert('All Boxes have elements.');
    }
  else 
        {
             $("#equal").show();
             $("#equal a").html("please check your account number  correctly");

        }

});

所以，伙计们，你做错了什么。请帮忙

Answer 1

使用：

开始您的jQuery

$( document ).ready(function() {

    .../ and end with:

});

也许这会解决你的问题

Answer 2

在jsfFiddle中，您的代码在onload事件上执行。

但是在validate.js中包含head后，脚本的内容就会在您放置<script src="validate.js"></script>的位置执行。所以你的jQuery选择器找不到任何元素，因为它们在脚本执行时不在DOM中。

你有不同的可能性。

将validate.js的内容包含在jQuery(function() { /*your code of validate.js **/ })
另一种可能性是将<script src="validate.js"></script>放在文档的末尾，而不是放在头部。
您可以使用$(document).on("keyup","#text10", function() { /* .... */ });之类的委派事件，这样，如果#text10目前在DOM中，则无关紧要。

Answer 3

将validate.js代码包装在jQuery就绪函数中，如下所示解决问题：

$(document).ready(function() {

// validate.js code

});

Answer 4

也许此链接可以帮助您： http://api.jquery.com/ready/

Jsfiddle代码无法在localhost wamp中工作

4 个答案: