JQuery验证不起作用 - 工作正常

时间:2014-07-28 12:36:07

标签: jquery validation

在每个人都杀了我的评论之前"之前已经问过XXX次",我已经搜索了这个并尝试了所有可能的解决方案而我无法正常工作 - 它现在正在运行但是现在它并不是,我不知道为什么......而且我感到沮丧,因为我知道这很简单。我已经将JQuery源文件位置移动到页面顶部,就在验证脚本上方,没有任何效果。

我是否只是错过了一些简单的事情,或者这根本不起作用?

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link rel="stylesheet" href="cls.css">

<script src="jquery/jquery-1.11.1.min.js"></script>
<script src="jquery/jquery.validate.js"></script>
<script src="jquery/additional-methods.min.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#y_candela").focus();
$("input").not( $(":button") ).keypress(function (evt) {
    if (evt.keyCode == 13) {
    iname = $(this).val();
    if (iname !== 'Submit'){
        var fields = $(this).parents('form:eq(0),body').find('input, textarea, select');
        var index = fields.index( this );
        if ( index > -1 && ( index + 1 ) < fields.length ) {
            fields.eq( index + 1 ).focus();
            }
            return false;
            }
        }
    });
});
</script>
</head>
<body bgcolor="#D2D7DD" OnLoad="document.step2.y_candela.focus();">
<div style="margin-left:auto; margin-right:auto; background-color:#FFFFFF; border-radius:8px; box-shadow: 0 0 15px #555; height: 470px; width: 540px; padding: 5px;position:relative;">
<div id="content" style="position:absolute;top:10px;">
<!---Page Content to go here, standard area is 800px by 480px--->   
<div style="width: 450px; text-align: center;">
<form action='med_step3.asp' method='POST' name='step2' id='yellow'>
<table width="450px">
    <tr>
        <td colspan="3" class="center">
            <h1>Medium Range<br />Step 2 - Yellow Circuit</h1>
        <td>
    </tr>
    <tr>
    <td colspan="3" class="center">
        <h2>Operator: JW</h2>
    </td>
</tr>
    <tr>
        <td class="right">
            Candela: <input type="number" name="y_candela" id="y_candela" class="rounded" autocomplete="off" />
        </td>
        <td class="left" colspan="2">
            (1100 - 1466)
        </td>
    </tr>
    <tr>
        <td class="right">
            TP (mV): <input type="number" name="y_tp" id="y_tp" class="rounded" autocomplete="off" />
        </td>
        <td class="left" colspan="2">
             (260 - 360)
        </td>
    </tr>
    <tr>
        <td class="right">
            Current (mA): <input type="number" name="y_current" id="y_current" class="rounded" autocomplete="off" />
        </td>
        <td class="left" colspan="2">
             (260 - 295)
        </td>
    </tr>
    <tr>
        <td class="right">
            x: <input type="text" name="y_x" id="y_x" class="rounded" value="0.5617" readonly />
        </td>
        <td class="left">
            y: <input type="text" name="y_y" id="y_y" class="rounded" value="0.4262" readonly />
        </td>
        <td>
            <img id="imgy" src="images/cross.gif" alt="image" />
        </td>
    </tr>
    <tr>
        <td class="right">
            Lux: <input type="text" maxlength="3" name="y_lux" id="y_lux" class="rounded" autocomplete="off" />
        </td>
    </tr>
    <tr>
        <td class="rightpad">
            +10&deg;
        </td>
        <td class="leftpad">
            -10&deg;
        </td>
    </tr>
    <tr>
        <td class="right">
            Angle Reading: 
            <input type="number" maxlength="3" name="yel_+10" id="yel_+10" class="rounded" autocomplete="off" />
        </td>
        <td class="left">
            <input type="number" maxlength="3" name="yel_-10" id="yel_-10" class="rounded" autocomplete="off" /> 
            (400 - 700)     
        </td>
    </tr>
    <tr>
        <td colspan="3" class="center">
            <input type="Submit" Value="Continue" id="submit" class="roundedBtn" />&nbsp;
            <input type="button" Value="Cancel" onClick="window.location='cls_test.asp';" class="roundedBtn" />
        </td>
    </tr>
    <tr>
        <td colspan="3" class="center">
            <input type="Submit" Value="Failure" name="fail" class="cancel" onclick="return confirm('Confirm Unit Failure');" />
        </td>
    </tr>
</table>
</form>

<script>
$( "#yellow" ).validate({
  rules: {
    y_candela: {
        required: true,
        min: 1100,
        max: 1466
    },
    y_tp: {
        required: true,
        min: 260,
        max: 360
    },
    y_current: {
        required: true,
        min: 260,
        max: 295
    },
    y_lux: {
        required: true,
        minlength: 3,
        maxlength: 3
    },
    yel_+10: {
        required: true;
        minlength: 3,
        maxlength: 3,
        min: 400,
        max: 700
    },
    yel_-10: {
        required: true;
        minlength: 3,
        maxlength: 3,
        min: 400,
        max: 700
    }
  }
});
</script>
<script type="text/javascript">
// document is ready

var submitButton = document.getElementById('submit');   
submitButton.setAttribute("disabled","disabled");

onload = function calculateY() {

    var yx = document.getElementById('y_x').value;  
    var yy = document.getElementById('y_y').value;  
    var result = false;
    if (yy <= (yx - 0.12))
    {
    if (yy >= (0.79 - (0.667 * yx)))
        {
        if (yy >= (yx - 0.17))
            {
            result = true;
            }
            if(result == false) {
                submitButton.setAttribute("disabled","disabled");
            } else {
                submitButton.removeAttribute("disabled");
                document.getElementById("imgy").src = "images/tick.gif";
                result = false;
            }
        }
    }
}
</script>
</div>
</div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

<script src="jquery/jquery-1.11.1.min.js"></script>    
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

错误的原因在于这一行。您已经两次声明了jQuery库。 删除其中一个声明,一切都应该正常。

另外,请注意,在 jQuery声明之前,您无法声明jQuery validate部分(,以防您决定删除第一个声明 )。