Comment autoriser uniquement les nombres dans une zone de texte dans mvc4 razor ?

Question

J'ai 3 zones de texte qui prennent les valeurs code postal, numéro de téléphone mobile et numéro de résidence. J'ai trouvé la solution pour n'autoriser que le numéro dans la zone de texte en utilisant Jquery dans le post ci-dessous.

Je voudrais qu'une zone de texte "EditFor" n'accepte que les chiffres.

mais pouvons-nous faire cela en utilisant les annotations de données car j'utilise MVC4 razor ?

Answer 1

Cela a marché pour moi :

<input type="text" class="numericOnly" placeholder="Search" id="txtSearch">

Javacript :

//Allow users to enter numbers only
$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});

Answer 2

Utilisez cette fonction dans votre script et mettez un span près de la textbox pour montrer le message d'erreur

$(document).ready(function () {
    $(".digit").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errormsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

@Html.TextBoxFor(x => x.company.ContactNumber, new { @class = "digit" })
<span id="errormsg"></span>

Answer 3

Pour les valeurs décimales supérieures à zéro, HTML5 fonctionne comme suit :

<input id="txtMyDecimal" min="0" step="any" type="number">

Answer 4

can we do this using data annotations as I am using MVC4 razor ?

Non, si je comprends bien votre question, la validation discrète ne montrera que les erreurs. Le moyen le plus simple est d'utiliser le plugin jquery :

Plugin d'entrée masquée

Answer 5

Voici le javascript qui vous permettra d'entrer uniquement des chiffres.

S'abonner à onkeypress pour la zone de texte.

@Html.TextBoxFor(m=>m.Phone,new { @onkeypress="OnlyNumeric(this);"})

Voici le javascript correspondant :

<script type="text/javascript">
function OnlyNumeric(e) {
            if ((e.which < 48 || e.which > 57)) {
                if (e.which == 8 || e.which == 46 || e.which == 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
</script>

J'espère que cela vous aidera.