Validation d'un champ sur un onglet à l'aide d'ASP.NET Entity Framework

Question

J'essaie d'obtenir un champ à valider sur un onglet plutôt que sur submit. Y at-il un moyen de faire ce travail? Je suppose que ce serait un script JQuery pour l'événement on change, mais je ne suis pas sûr de la méthode utilisée.

Voici mon script de modification en cours, il exécute simplement une méthode appelée GetUserDetails qui n'est pas liée à ce problème et remplit automatiquement mes champs. J'en ai besoin pour lancer ou déclencher la validation aussi bien. Il doit savoir si le nom d'utilisateur existe mais il ne semble pas fonctionner dans ce cas lorsque j'essaie la méthode alert.

<script> 
    $('#username').on("change", function (event) { 
     var userName = $('#username').val(); 
     //make an ajax request 
     var model = JSON.parse('{"userId":"' + userName + '"}'); 

     //precess the retrieved json 

     //place json fields on the input boxes in html 

     $.ajax({ 
      type:"POST", 
      url: "/Employees/GetUserDetails/", 
      data: model, 
     }).done(function (data) { 
      if (data.FullName == null || data.FullName == "") { 
       $('#username').alert("Username does not exist."); 
      } 
      $('#fullname').val(data.FullName); 
      $('#email').val(data.email); 
      $('#phone').val(data.phone); 
     }); 
    }); 
</script> 

Je veux qu'il fasse ce qu'il ferait si j'appuyais sur submit pour un champ donné. Mon modèle a les annotations pour validation.

Answer 1

MISE À JOUR: Vous ne pouvez pas le valider tant que vous n'avez pas envoyé le formulaire. Mais ce que nous pouvons faire est une validation personnalisée côté client.

===========================

Vous pouvez utiliser .blur() pour détecter perdu le focus.

L'événement de flou est envoyé à un élément lorsqu'il perd le focus. https://api.jquery.com/blur/

$(function(){ 
 
    $('#txt').on("blur", function (event) { 
 
    if ($(this).val() == ""){ 
 
     alert("please input value"); 
 
    } 
 
    else{ 
 
    var userName = $('#username').val(); 
 
     //make an ajax request 
 
     var model = JSON.parse('{"userId":"' + userName + '"}'); 
 

 
     //precess the retrieved json 
 

 
     //place json fields on the input boxes in html 
 

 
     $.ajax({ 
 
      type:"POST", 
 
      url: "/Employees/GetUserDetails/", 
 
      data: model, 
 
     }).done(function (data) { 
 
      $('#fullname').val(data.FullName); 
 
      $('#email').val(data.email); 
 
      $('#phone').val(data.phone); 
 
     }); 
 
    } 
 
    }) 
 

 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" name="sample" id="txt"/> 
 
    <input type="text" name="sample2" id="txt1"/>