我的第一个Jquery代码出了什么问题，如何完成此事件？
[英]What's wrong with my first Jquery code and how can I accomplish this event?
问题描述
I have a quick Jquery question .. This Jquery code is supposed to show red borders on the input text boxes if they are not filled at all after clicking on submit , this code is from book , I copied exactly the way the code is but I do not get the red borders at all , looks like it's not working .. 
我有一个快速的Jquery问题..如果单击提交后根本没有填满输入文本框，则此Jquery代码应该在输入文本框上显示红色边框，此代码来自书本，我完全按照代码的方式进行复制，但我根本没有红色边框，看起来好像没有用..
Also I'd like to give this code conditions during the validation process of the form.. If the ESN list text field is in the range of 1000 to 3000, I'd like the drop down to automatically select STM3 below, if the range of the number input is between 5000 and 9000, I'd like Trackpack to automatically populate after a user let's say type 6000 on the text input field .. How can I trigger the dropdown menu after typing a number on the text field? 另外，我想在表单的验证过程中提供此代码条件。.如果ESN列表文本字段的范围是1000到3000，我希望下拉列表自动选择下面的STM3输入的数字介于5000到9000之间，我希望Trackpack在用户在文本输入字段上输入6000后自动填充。在文本字段上输入数字后，如何触发下拉菜单？ Too tricky for a newbie , your help would be much appreciated. 对于新手来说太棘手了，我们将不胜感激。
<html>
<head> <title> Form </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(':submit').click(function(e) {
$(':text').each(function() {
if($(this.val().length == 0) {
$(this).css('border', '2px solid red');
}
});
e.preventDefault();
});
</script>
</head>
<body >
<form id="provision">
ESNList: <input type="text" id="ESNList" name="ESNList" size="30" /> <br />
ESN Start:<input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
ESN End: <input type="text" id="ESNStart" name="ESNStart" size="10" /> <br />
UnitName:<input type="text" id="STxName" name="STxName" size="30" /> <br />
Unit Model: <select name="STxName">
<option value="stx2">STX2</option>
<option value="protopak">Protopak</option>
<option value="stm3" selected>STM3</option>
<option value="acutec">Acutec</option>
<option value="mmt">MMT</option>
<option value="smartone">Trackpack</option>
<option value="smartoneb" >SmartOneB</option>
<option value="audi">Acutec</option>
</select> <br />
RTU Model Type:
<select name="rtumodel">
<option value="globalstar">GlobalStar</option>
<option value="both">Both</option>
<option value="comtech">Comtech</option>
<option value="stmcomtech">STMComtech</option>
</select> <br />
<input type="submit" value ="submit" />
</form>
</body>
</html>
3 个解决方案
解决方案1
1 2013-01-15 19:29:07
You have a typo ( $(this.val().length should be $(this).val().length ). 您有一个错字（ $(this.val().length应该是$(this).val().length ）。
$(':submit').click(function(e) {
e.preventDefault();
$(':text').each(function() {
if($(this).val().length == 0) {
$(this).css('border', '2px solid red');
}
});
});
A few thoughts: 一些想法：
- Consider, for readability, preventing the default (
e.preventDefault();) before evaluating the input fields for length.为了提高可读性，请在评估输入字段的长度之前考虑防止使用默认值（ e.preventDefault();）。 - Consider also using the more-specific
$('input:text')selector (instead of$(':text')).还考虑使用更具体的$('input:text')选择器（而不是$(':text')）。 Benchmarking shows it performs much, much, better.基准测试表明它的性能要好得多。 - Native JavaScript can replace the jQuery you are using to evaluate the presence on input field values and will generally run faster ; 本机JavaScript可以代替您用于评估输入字段值是否存在的jQuery，并且运行速度更快 ; replace
if($(this).val().length == 0)...withif (this.value.length === 0)用if (this.value.length === 0)替换if($(this).val().length == 0)...
See http://jsfiddle.net/jhfrench/PvHGM/ for a working example. 有关工作示例，请参见http://jsfiddle.net/jhfrench/PvHGM/ 。
解决方案2
0 2013-01-15 19:22:12
A problem is you are not waiting for the page to load to attach your events. 问题在于您不等待页面加载来附加事件。 This is easy to do in jQuery, simply surround the code in $(function () {...}); 这在jQuery中很容易做到，只需将代码括在$(function () {...}); as I've done below: 正如我在下面所做的：
I also fixed a typo. 我还修正了一个错字。
$(function () {
$(':submit').click(function(e) {
$(':text').each(function() {
var th = $(this);
if(th.val().length == 0) {
th.css('border', '2px solid red');
}
});
e.preventDefault();
});
});
解决方案3
0 已采纳 2013-01-15 19:24:51
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.