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

ここを参照してください：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;
    }

}​
于 2012-11-14T15:45:55.850 に答える