Я написал простую форму контакта в своем приложении mvc3. Кажется, что все работает отлично, но, похоже, проблема связана с тем, что основное внимание уделяется моему почтовому ящику с недопустимым представлением, несмотря на то, что все поля недействительны. Вот ViewModel я использую:Как остановить фокус текстового поля, когда моя форма недействительна?
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; }
}
Как вы можете видеть, единственное различие между полями, у меня есть дополнительные регулярное выражение валидаторы в поле Адреса электронной почты. Я полагаю, что это имеет какое-то отношение к тому, почему оно перескакивает в эту область при неудачной проверке?
Вот код для моего зрения:
@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>
}
Я попытался смещая фокус на кнопку отправки, поставив $('#submit').focus() где // TODO: комментарий. Однако это не устранило проблему, поскольку все еще казалось, что она переключает фокус на поле «Электронная почта», прежде чем переключать его на кнопку «Отправить», что, в свою очередь, означает, что мой «авто-намек» для этого поля был удален.
Есть ли какой-либо способ, которым я могу остановить фокус от смещения вообще? И если нет, могу ли я как-то переключить его на кнопку отправки без первого перехода на мое поле электронной почты?
Спасибо!