这种形式曾经有效。直到我对电子邮件验证功能进行了一些调整。有什么我没有看到需要做的事情吗?另外,我该如何改进这个表格?
我改变的是哪个验证首先触发。一旦完成基本验证并且电子邮件不为空。我想在继续提交之前验证电子邮件。
$(document).ready(function() {
//add default text on certain fields
$("#phone").on({
focus: function() {
if($(this).val().length === 0) {
$(this).val('+'); }
},
blur: function() {
if($(this).val() === '+') {
$(this).val(''); }
}
});
$("#twitter").on({
focus: function() {
if($(this).val().length === 0) {
$(this).val('@'); }
},
blur: function() {
if($(this).val() === '@') {
$(this).val(''); }
}
});
$("#facebook").on({
focus: function() {
if($(this).val().length === 0) {
$(this).val('facebook.com/'); }
},
blur: function() {
if($(this).val() === 'facebook.com/') {
$(this).val(''); }
}
});
$("#portfolio").on({
focus: function() {
if($(this).val().length === 0) {
$(this).val('www.'); }
},
blur: function() {
if($(this).val() === 'www.') {
$(this).val(''); }
}
});
//when submit is clicked
$('#contactform').on('submit', function() {
var form = $(this);
var inputs = $('input[type="text"]');
var workshop = $('#selectworkshop');
var firstname = $('#firstname');
var lastname = $('#lastname');
var email = $('#email');
var phone = $('#phone');
var companyorschool = $('#companyorschool');
var portfolio = $('#portfolio');
var twitter = $('#twitter');
var facebook = $('#facebook');
var honeypot = $('#honeypot');
var invalid = false;
//basic validation on required fields
$('.required').each(function() {
if ($(this).val().length === 0) {
$(this).addClass('highlight');
if($('#form-alert').is(':visible')) {
$('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'});
} else {
$('#form-alert').html('Please fill in the required information.').slideDown('slow');
}
invalid = true;
} else {
$(this).removeClass('highlight');
invalid = false;
}
});
if (invalid === true) {
return false;
}
//basic email validation
if(validateEmail(email) === false) {
$(email).addClass('highlight');
if($('#form-alert').is(':visible')) {
$('#form-alert').html('Please enter a valid email address.');
$('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'});
} else {
$('#form-alert').html('Please enter a valid email address.').slideDown('slow');
$('body').scrollTo('#form-alert',{duration:'fast', offsetTop : '30'});
}
invalid = true;
} else {
invalid = false;
}
if (invalid === true) {
return false;
}
//email validation function using regex
function validateEmail(email) {
var emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$/;
if(!emailReg.test(email)) {
return false;
} else {
return true;
}
}
//show the loading animation on button
$('#submit').val(' ').addClass('loading').attr('disabled', 'true');
//start the ajax
$.ajax({
url: '/registration.php',
type: 'POST',
data: form.serialize(),
cache: false,
beforeSubmit: function() {
if($('#form-alert').is(':visible')) {
$('form-alert').slideUp('fast');
}
},
success: function(responseText, statusText, xhr) {
console.log("Worked!");
$('#form-success').html(responseText).slideDown('slow');
},
complete: function() {
inputs.attr('disabled', 'true');
$('#submit').removeClass('loading').val('REGISTRATION COMPLETE');
}
});
//cancel the submit button default behaviours
return false;
});
});