Comment puis-je arrêter le focus de la zone de texte lorsque mon formulaire est invalide?

Question

J'ai écrit un formulaire de contact simple dans mon application mvc3. Tout semble fonctionner parfaitement, sauf qu'il semble y avoir un problème avec l'accent mis sur mon champ de courrier électronique sur une soumission invalide, malgré que tous les champs soient invalides. Voici le ViewModel J'utilise:

public class ContactViewModel 
{ 
    [Required(ErrorMessage="Please enter your name")] 
    public string Name { get; set; } 

    [Required(ErrorMessage="Please enter your email address")] 
    [RegularExpression(@"^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(([0-9]{1,3})|([a-zA-Z]{2,3})|(aero|coop|info|museum|name))$", ErrorMessage="Please enter a valid email address")] 
    public string Email { get; set; } 

    [Required(ErrorMessage="Please enter your message")] 
    public string Message { get; set; }  
} 

Comme vous pouvez le voir, la seule différence entre les champs est que j'ai un validateur regex supplémentaire dans le champ E-mail. Je suppose que cela a quelque chose à voir avec pourquoi il saute à ce domaine particulier sur la validation échouée?

Voici le code pour moi:

@model MSExport.Models.ContactViewModel 
@{ 
    ViewBag.Title = "Contact"; 
} 
@section HeaderScripts 
{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function() { 
       if ($(this).val() == $(this).attr('title')) { 
        $(this).val(''); 
        $(this).removeClass('auto-hint'); 
       } 
       else { $(this).removeClass('auto-hint'); } 
      }); 
      $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function() { 
       if ($(this).val() == '' && $(this).attr('title') != '') { 
        $(this).val($(this).attr('title')); 
        $(this).addClass('auto-hint'); 
       } 
      }); 

      IterateFields(); 

      $('form').submit(function() { 
       AmendValues(); 
       if ($(this).valid()) { 
        var contactVM = { 
         Name: $('#Name').val(), 
         Email: $('#Email').val(), 
         Message: $('#Message').val() 
        }; 

        $('form').slideUp('slow', function() { 
         $('#result').html("<img src='/images/loading.gif' alt='Loading' />"); 
         $.ajax({ 
          url: '/Contact/SubmitForm', 
          type: "POST", 
          data: JSON.stringify(contactVM), 
          contentType: "application/json; charset=utf-8", 
          success: function (result) { 
           $('#result').empty(); 
           $('#result').html(result); 
          }, 
          error: function() { 
           $('#result').empty(); 
           $('#result').html("<p>There was a problem submitting your message. Please try again.</p>"); 
          } 
         }); 
        }); 
       } 
       else { 
        IterateFields(); 
        // TODO: Stop focus going to email field 
       }     
      }); 
     }); 

     function AmendValues() { 
      $('#contact-form-wrapper INPUT[type=text],TEXTAREA').each(function() { 
       if ($(this).val() == $(this).attr('title')) { $(this).val(''); } 
      }); 
     } 

     function IterateFields() { 
      $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function() { 
       if ($(this).attr('title') == '') { return; } 
       if ($(this).val() == '') { $(this).val($(this).attr('title')); } 
       else { $(this).removeClass('auto-hint'); } 
      }); 
     } 
    </script> 
} 

<h1>Contact</h1> 
<div id="result"></div> 
@using (Html.BeginForm()) { 
    <div id="contact-form-wrapper"> 
     <label for="Name"> 
      @Html.TextBoxFor(model => model.Name, new { @class = "auto-hint", @title = "Name", @tabindex = "1", @maxlength = "100" }) 
      @Html.ValidationMessageFor(model => model.Name) 
     </label> 
     <label for="Email"> 
      @Html.TextBoxFor(model => model.Email, new { @class = "auto-hint", @title = "Email", @tabindex = "2", @maxlength = "200" }) 
      @Html.ValidationMessageFor(model => model.Email) 
     </label> 
     <label for="Message"> 
      @Html.TextAreaFor(model => model.Message, new { @class = "auto-hint", @title = "Message", @tabindex = "3", @maxlength = "2000" }) 
      @Html.ValidationMessageFor(model => model.Message) 
     </label> 
     <input type="submit" value="Submit" tabindex="4" id="submit" />   
    </div> 
} 

J'ai essayé déplacer le focus sur le bouton soumettre en mettant $('#submit').focus() où le commentaire est // TODO:. Toutefois, cela n'a pas résolu le problème, car il semblait toujours déplacer le focus vers le champ E-mail AVANT de le déplacer vers le bouton "Soumettre", ce qui signifiait que mon "auto-indice" pour ce champ était supprimé.

Y a-t-il un moyen d'empêcher le décalage d'être décalé du tout? Et si non, puis-je en quelque sorte le déplacer vers le bouton de soumission sans d'abord aller à mon champ Email?

Merci!

Answer 1

Cela pourrait-il vous être utile?

http://docs.jquery.com/Plugins/Validation/Reference#Focusing_of_invalid_elements

Pour mettre en œuvre les options suivent ces documents (sous l'onglet Options)

http://docs.jquery.com/Plugins/Validation/validate#options

par exemple

$(".selector").validate({ 
    focusInvalid: false 
})