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



具有以下情况: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 函数来防止/取消导致焦点输出的任何其他事件?返回假不起作用。

(例如,如果用户在已验证字段中,并在单击选择时输入"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;
    }
}​

看这里: http://jsfiddle.net/kzzy9/6/

与其内联附加事件,不如使用 javascript 附加它们。超时后,我正在重新聚焦"发件人"。当您在输入外部单击时发生的情况是调用模糊事件,然后聚焦另一个元素(可能通过单击事件)。

$("#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;
    }
}​

相关内容

  • 没有找到相关文章

最新更新