1

Having the following case: 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>

What jQuery function can i call to prevent/cancel any other event that caused the focusout when the value is not correct? Return false doesnt work.

(For example if the user is in the validated field and inputs "100a" when he clicks in the select, the options are not shown, or if he clicks in the button the alert is not shown" [cancel the event])

PS: I know someone will tell me about usability problems, form validation at submit, etc but this is the case i have been imposed to do, so thanks beforehand but i need to solve it this way specifically...

4

2 回答 2

0

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

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;
    }
}​
于 2012-11-14T15:39:24.093 回答
0

See here: http://jsfiddle.net/kzzy9/6/

Instead of attaching events inline, you should attach them with javascript. I'm re-focusing the "sender" after a timeout. What was happening when you click outside of the input is that the blur event is called, then another element is focused (through perhaps a click event). 

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

}​
于 2012-11-14T15:45:55.850 回答