Question

有以下案例：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：我知道有人会告诉我有关可用性问题，提交时的表单验证等等，但是这是我被强制执行的情况，所以非常感谢，但我需要以这种方式专门解决...

Answer 1

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

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;
    }
}

Answer 2

见这里：http://jsfiddle.net/kzzy9/6/

您应该使用javascript附加事件，而不是内联事件。我在超时后重新聚焦“发送者”。单击输入外部时发生的事情是调用blur事件，然后聚焦另一个元素（通过点击事件）。

$("#name").blur(validarcampoimporte);

function validarcampoimporte(e) {

    var importe = this.value;
    var me = $(this);
    if (!(/^\d*(?:\,\d{0,2})?$/.test(importe))) {
        setTimeout(function(){me.focus();}, 20);

        $(this).addClass("inputerror");
        e.preventDefault();
        return false;
    } else {
        $(this).removeClass("inputerror");
        return true;
    }

}

当字段在javascript中具有不正确的值时，取消下一个事件

2 个答案: