javascript - 当 javascript 中的字段值不正确时取消下一个事件

标签 javascript jquery validation event-handling

有以下情况:http://jsfiddle.net/kzzy9/

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    .inputerror {
    color: #B94A48;
    border-color: #EE5F5B;
    background-color: #FFE1E0;
}
  </style>

<script type="text/javascript">//<![CDATA[ 

function validarcampoimporte(sender) {
    var importe = sender.value;
    if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
        $(sender).focus().select();
        $(sender).addClass("inputerror");
        //prevent any other event that caused the focusout until the user corrects the value
        return false;
    } else {
        $(sender).removeClass("inputerror");
        return true;
    }
}
//]]>  

</script>

<style type="text/css"></style></head>
<body>
  <select name="ddlMes" id="ddlMes">
        <option value="1">Enero</option>
        <option value="2">Febrero</option>
        <option value="3">Marzo</option>
        <option value="4">Abril</option>
        <option value="5">Mayo</option>
        <option value="6">Junio</option>
        <option value="7">Julio</option>
        <option value="8">Agosto</option>
        <option value="9">Septiembre</option>
        <option value="10">Octubre</option>
        <option selected="selected" value="11">Noviembre</option>
        <option value="12">Diciembre</option>

    </select>
        <input class="" id="name" size="15" type="text" onblur="return validarcampoimporte(this);">
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">
</body>
</html>

当值不正确时,我可以调用什么 jQuery 函数来防止/取消导致焦点消失的任何其他事件?返回 false 不起作用。

(例如,如果用户位于已验证字段中,并在单击选择时输入“100a”,则不会显示选项,或者如果他单击按钮,则不会显示警报”[取消事件] )

PS:我知道有人会告诉我有关可用性问题、提交时的表单验证等问题,但这是我被迫要做的情况,所以预先感谢,但我需要专门以这种方式解决它......

最佳答案

您可以通过这种方式更改代码。

HTML(监听onkeyup事件)

<select name="ddlMes"  id="ddlMes" >
        <option value="1">Enero</option>
        <option value="2">Febrero</option>
        <option value="3">Marzo</option>
        <option value="4">Abril</option>
        <option value="5">Mayo</option>
        <option value="6">Junio</option>
        <option value="7">Julio</option>
        <option value="8">Agosto</option>
        <option value="9">Septiembre</option>
        <option value="10">Octubre</option>
        <option selected="selected" value="11">Noviembre</option>
        <option value="12">Diciembre</option>

    </select>
        <input class="" id="name" size="15" type="text" onkeyup="return validarcampoimporte(this);" />
<input type="submit" value="Buttonx" onclick="alert('i got clicked')">

//JS(验证)

function validarcampoimporte(sender) {
    var importe = sender.value;
    if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
        $(sender).focus().select();
        $(sender).addClass("inputerror");

        $('input[type="submit"]').attr('disabled', 'disabled');
        $('select').attr('disabled', 'disabled');
        return false;
    } else {
        $(sender).removeClass("inputerror");
        $('input[type="submit"]').removeAttr('disabled');
        $('select').removeAttr('disabled');
        return true;
    }
}​

关于javascript - 当 javascript 中的字段值不正确时取消下一个事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13381697/

相关文章:

c# - jQuery .load 似乎在意想不到的地方运行

javascript - jQuery - 如何在使用 'click' 事件时获取元素的属性

javascript - jQuery 点击内部函数(全局)

javascript - 验证正在运行,但警报/消息未显示

javascript - angularJS 中的客户端重复数据验证

Django 表单无法验证

javascript下拉验证

javascript - 如何使用 CSS/JavaScript 在链接上取消悬停?

javascript - emberjs - 在更大的模板中有条件地渲染模板

javascript - 引用错误: is not defined : localStorage