Question

此表格过去有用。直到我使用电子邮件验证功能进行了一些调整。有什么东西我没看到需要做的吗？另外，我该如何改进这种形式？

我改变的是先验证哪个验证。完成基本验证后，电子邮件不为空。我希望在继续提交之前验证电子邮件。

$(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;
    });
});

Answer 1

我做了一些改动让这项工作成功。在条件中提交表单似乎会产生很大的不同。还有改进的余地。我会在某个时候做到这一点。

$(document).ready(function() {

    //add default text on certain fields (removed to simplify answer)

    //when submit is clicked
    $('#submit').on('click', function() {
        var form = $('#contactform');
        var inputs = $('input[type="text"]');
        var workshop = $('#selectworkshop');
        var firstname = $('#firstname').val();
        var lastname = $('#lastname').val();
        var email = $('#email').val();
        var phone = $('#phone').val();
        var companyorschool = $('#companyorschool').val();
        var portfolio = $('#portfolio').val();
        var twitter = $('#twitter').val();
        var facebook = $('#facebook').val();
        var honeypot = $('#honeypot').val();
        var required_invalid = false;
        var email_invalid = false;
        var email_validation = /^[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])?)*$/;

        $('.required').removeClass('highlight');

        //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');
                    }
                required_invalid = true;
            }
        });

        if (required_invalid === true) {
            return false;
        }

        //basic email validation
        if(!email_validation.test(email)) {
            $(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'});
                }
            email_invalid = true;
        }

        if (email_invalid === true) {
            return false;
        }

        if (required_invalid === false && email_invalid === false) {

            //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,
                success: function(responseText, statusText, xhr) {
                    console.log("Worked!");
                    $('form-alert').slideUp();
                    $('#form-success').html(responseText).slideDown('slow');
                },
                complete: function() {
                    inputs.attr('disabled', 'true');
                    $('#submit').removeClass('loading').val('REGISTRATION COMPLETE');
                }
            });
        } else {
            //cancel the submit button default behaviours
            return false;
        }
    });
});

登记表格未提交

1 个答案: