Validate texbox from 1 to 100

Question

Validate texbox from 1 to 100

Navigation

#1 by (1 votes)

0

I'm doing a validation in which I can register numbers from 1 to 100, the more an error message comes out and the texbox is cleaned, it works perfect, when the user leaves that texbox he jumps the second message saying that introduces the number since it can not be empty, I show you the code.

 <td><input type="number" style="width:45px;" id = "txtNotaDecidir<%:contDecidir %>" min="0" max="100" onblur = "Validar(event, this.id)"  onkeyup = "ValidarNumero(event, this.id)" ng-model="model.selected.<%: eval.ColNota %>" /></td>

 <script type="text/javascript">
       document.addEventListener('keyup', Validar, true);
       function ValidarNumero(nota) {
           var idTexto = document.activeElement.id;
           var num = document.getElementById(idTexto).value;
              if (parseFloat(num) < 0 || parseFloat(num) > 100) {
                   alert("El numero no puede ser mayor a 100");                    
                    document.getElementById(idTexto).focus;
                    return document.getElementById(idTexto).value = "";                                 

               } else
                   return nota.value;                  
       }
      document.addEventListener('onblur', Validar, false);

       function Validar(nota,id) {                    
           var num = document.getElementById(id).value;
               if (num == "") {
                   alert("Introduzca nota");
                   document.getElementById(id).focus;
               }           
           else
               return nota.value;
       }
        </script>

My question is because when I enter a number greater than 100 it shows me the two error windows all the time, it does not let me do anything through the windows, which may be wrong in the code, please help ...

asp.net mvc

asked by Romer 16.05.2018 в 18:38

source

1 answer

How can I include external js files in ionic 3 Delete space between two print

score 1 · Answer 1

It is assumed that you are working with the MVC (Model-View-Controller) pattern, therefore, you must apply the validation directly in the model so that it is reflected in your page:

public class Movie {
    public int ID { get; set; }

    [Required]
    public string Title { get; set; }

    [DataType(DataType.Date)]
    public DateTime ReleaseDate { get; set; }

    [Required]
    public string Genre { get; set; }

    [Range(1, 100)]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

For your case, the Price field applies the range validation. Clarifying, that this validation will occur when the form / control is sent.

Now, if you want to validate it from the client, you need the JQuery libraries:

jquery.validate.js
jquery.validate.unobtrusive.js

And then you must add the following attributes to your controls:

data-val-range="The values must be within the range ..."
data-val-range-max="MAXIMUM VALUE"
data-val-range-min="MINIMUM VALUE"

It would be something like this:

<input type="text" name="number" id="number" data-val="true" data-val-range="Mensaje de error aquí" data-val-range-max="100" data-val-range-min="1"/>