Question

I have coded custom form validation. validation is working fine all browser but when I am pressing enter key IE is not submitting from if user entered correct data… on click of button its submitting form. I have tried to debug it , its returning true after validation but not submiting form…

(function($){
$.fn.securityFramework = function() {
    var form = $(this);
    var $submitBtn = $('input.sf-submit');

    var errorClass = "error";
    var passClass = "pass";
    var MandatoryClass = "mandatory";
    //var $securityQuestions = $('.securityQuestions');

    // used in form submission
    var submitOK = false;
    var currentPWResult = true;
    var tcResult = true;

    //check username length
    var $userName = $('#userName',form);

    // create empty warning spans to stop focus issues in IE
    //displayResult($('input[type=text]', form), "","");
    //displayResult($('input[type=password]', form), "","");

    /* Registration form checks */
    // check user name for length and invaid characters
    $userName.keyup(function() {
        var userResult = minLength(6, $userName.val().length);
        var userNameResult =  validUserName($userName.val());
        if ( $(this).val() != "" ) {

            if ( userResult || userNameResult ) {
                if(userResult) {
                    //displayResult($(this), 'Please choose a longer username', errorClass);
                    $(this).focus();
                } 

                if(userNameResult) {
                    //displayResult($(this), 'Your username contains invalid characters', errorClass);
                    $(this).focus();
                }
            } else {
                //displayResult($(this), '', passClass);
                $(this).focus();
            }
        }
    });


    // check that all form text inputs are not empty
    $('input[type=text]:not(input.email)', this).blur(function() {
        $(this).each(function(index, value) {
            if( isEmptyString($(this)) ) {
                var message = checkManitoryMessage($(this));
                //displayResult($(this), message, MandatoryClass);
            } else {
                // remove mandatory class
                if ( $(this).siblings().hasClass('mandatory') ) {
                    $(this).siblings().remove();
                }
            }
        });
    });

    $('input[type=password]:not(input.password)', this).blur(function() {
        $(this).each(function(index, value) {
            if( isEmptyString($(this)) ) {
                var message = checkManitoryMessage($(this));
                //displayResult($(this), message, MandatoryClass);
            } else {
                // remove mandatory class
                if ( $(this).siblings().hasClass('mandatory') ) {
                    $(this).siblings().remove();
                }
            }
        });
    });


    // check validation on form submission
    form.submit(function(e) {
        // trigger checks for empty fields
        $('input[type=password]', form).trigger('blur');
        $('input[type=text]', form).trigger('blur');

        submitCheck();
        if(submitOK ) {
            alert("true");
            return true;
        } else {
            return false;
        }
    }); 


    // generic testing functions
    function emailVal(emailAddress) {
        emailAddress = emailAddress.toLowerCase();
        var pattern = new RegExp(/^[a-z0-9_\+-]+(\.[a-z0-9_\+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,4})$/);
        return pattern.test(emailAddress);
    }

    // check for empty string
    function isEmptyString(jQueryObj) {
        return ( jQueryObj.val() == "");
    }

    // check username for invalid characters ("!£$%?/@)
    function validUserName(name) {
        var pattern = new RegExp(/["\u00A3!\$%\?/@]/);
        return pattern.test(name);
    }

    // check string length against a value
    function minLength(minLength, string) {
        return((string+1) <= minLength);

    }

    // check that two strings match
    function checkStringsMatch(string1, string2){
        // console.log('str1: ' + string1 + ' str2: ' + string2);
        return(string1 == string2);
    }
    // check for password validation
    function checkPasswordValidation(passwordObj){
        password=passwordObj.val();
        var pattern = new RegExp(/^.*(?=.{8,})(?=.*[a-zA-Z])(?=.*\d).*$/);
        return pattern.test(password);
    }

    // check password strength
    function checkPwStrength() {
        var pwStrength = $('#strengthWidget').attr('class');
        // check class for password classification
        if(pwStrength == 'pw-weak') {
            return true;
        }
        return false;
    }

    // generic display error and confirm message function
    function displayResult(selector, message, className) {
        // check to see if input has a wrapper span to hold message
        if(selector.parent().hasClass('wrapper')) {
            // has wrapper, remove message contained
            selector.parent().children('span').remove();
        } else {
            // no wrapper, add one to append message to
            selector.wrap('<span class="wrapper"></span>');
        }
        selector.parent().append('<span class="' + className + '">' + message + '</span>');
    }

    // checks to see if any errors on page, if none found enable submission
    function submitCheck() {
        var $errorsExist = $('.error', form);
        var $mandErrorsExist = $('.mandatory', form);
        var $highlightErrorsExist = $('.highlightError', form);
        // console.log($highlightErrorsExist.length);
        // console.log('$errorsExist.length: ' + $errorsExist.length);
        // console.log('$mandErrorsExist.length: ' + $mandErrorsExist.length);

        if ($errorsExist.length || $mandErrorsExist.length || $highlightErrorsExist.length ) {
            submitOK = false;
        } else {
            submitOK = true;
        }
        // console.log('submitOK = ' + submitOK );
    }

    function checkManitoryMessage($object) {
        var inputId = '';
        inputId = $object.attr('id');

        inputId = inputId.toLowerCase();
        if (inputId == undefined) {
            inputId = 'Manditory Field';
        } else {
            inputId = sfErrors[inputId];
        }
        return inputId;
    }

    return form;
}; // end of plugin
})(jQuery);

Answer 1

You can try:

$("form input").keypress(function (e) {
   if(e.which === 13) {
      $("form").submit();
   }
});