0
我已經在我的mvc3應用程序中編寫了一個簡單的聯繫表單。一切似乎都完美無缺，除非在我的電子郵件字段上重點放在無效提交上，儘管所有字段都無效，但似乎存在問題。下面是我使用的視圖模型：我的表單無效時，如何停止文本框焦點？
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:評論是將重心轉移到提交按鈕。然而，這並沒有解決問題，因爲它似乎仍然將焦點轉移到電子郵件字段，然後將其移到提交按鈕，這反過來意味着我的這個領域的'自動提示'被刪除。
有什麼辦法可以阻止焦點被轉移嗎？如果沒有，我可以以某種方式將它轉移到提交按鈕，而不必先到我的電子郵件字段？
謝謝！