渐进式形式的 Jquery 电子邮件验证

问题描述 投票：0回答：1

我正在使用渐进式表单，并在单击下一步按钮时寻求集成电子邮件验证的帮助。

目前，无论字段中是否输入了电子邮件地址，表单都会进入后续部分。

期待任何帮助。预先感谢。

这是JS代码

    jQuery(document).ready(function() {
    
    // click on next button
    jQuery('.msform-next-btn').click(function() {
        var parentFieldset = jQuery(this).parents('.msforms-fieldset');
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        var next = jQuery(this);
        var nextmsformsStep = true;
        parentFieldset.find('.msforms-required').each(function(){
            


            var thisValue = jQuery(this).val();

            if( thisValue == "") {
                jQuery(this).siblings(".msforms-form-error").slideDown();
                nextmsformsStep = false;
            }
            else {
                jQuery(this).siblings(".msforms-form-error").slideUp();
            }
        });
        if( nextmsformsStep) {
            next.parents('.msforms-fieldset').removeClass("show","400");
            currentActiveStep.removeClass('active').addClass('activated').next().addClass('active',"400");
            next.parents('.msforms-fieldset').next('.msforms-fieldset').addClass("show","400");
            jQuery(document).find('.msforms-fieldset').each(function(){
                if(jQuery(this).hasClass('show')){
                    var formAtrr = jQuery(this).attr('data-tab-content');
                    jQuery(document).find('.msform-steps .msform-step-item').each(function(){
                        if(jQuery(this).attr('data-attr') == formAtrr){
                            jQuery(this).addClass('active');
                            var innerWidth = jQuery(this).innerWidth();
                            var position = jQuery(this).position();
                            jQuery(document).find('.msform-step-move').css({"left": position.left, "width": innerWidth});
                        }else{
                            jQuery(this).removeClass('active');
                        }
                    });
                }
            });
        }
    });
    //click on previous button
    jQuery('.msform-previous-btn').click(function() {
        var counter = parseInt(jQuery(".msforms-counter").text());;
        var prev =jQuery(this);
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        prev.parents('.msforms-fieldset').removeClass("show","400");
        prev.parents('.msforms-fieldset').prev('.msforms-fieldset').addClass("show","400");
        currentActiveStep.removeClass('active').prev().removeClass('activated').addClass('active',"400");
        jQuery(document).find('.msforms-fieldset').each(function(){
            if(jQuery(this).hasClass('show')){
                var formAtrr = jQuery(this).attr('data-tab-content');
                jQuery(document).find('.msform-steps .msform-step-item').each(function(){
                    if(jQuery(this).attr('data-attr') == formAtrr){
                        jQuery(this).addClass('active');
                        var innerWidth = jQuery(this).innerWidth();
                        var position = jQuery(this).position();
                        jQuery(document).find('.msform-step-move').css({"left": position.left, "width": innerWidth});
                    }else{
                        jQuery(this).removeClass('active');
                    }
                });
            }
        });
    });
   
   
  //click on form submit button
    jQuery(document).on("click",".msform .msform-submit" , function(){
        var parentFieldset = jQuery(this).parents('.msforms-fieldset');
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        parentFieldset.find('.msforms-required').each(function() {
            var thisValue = jQuery(this).val();
            if( thisValue == "" ) {
                jQuery(this).siblings(".msforms-form-error").slideDown();
            }
            else {
                jQuery(this).siblings(".msforms-form-error").slideUp();
            }
        });

    });
  
jQuery('#demoform').submit(function() {
    var form = jQuery("#demoform");
    var actionURL = form.attr("action");
    jQuery.ajax({
        type: 'POST',
        url: actionURL,
        data: form.serialize(),
        dataType: 'json',
        success: function(json) {

           jQuery('#jfunction option.spacesforitoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/1b2l9bxp7jey";
                } 
            });

           jQuery('#jfunction option.smartvenueoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/wdwhwzhiuad7";
                } 
            });

            jQuery('#jfunction option.smartworkspaceoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/h2p5pxhr2baj";
                } 
            });

            jQuery('#jfunction option.smartopoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/hiupogofhcgv";
                } 
            });
           
        }
    })
    return false;
});
    
});

这是JSfillde 链接

html jquery forms
1个回答
-1
投票

您可以添加一个简单的电子邮件验证功能来实现此目的。我已向您提供了现有代码以及下面包含的更新代码。

jQuery：

jQuery(document).ready(function() {
    // Email validation function
    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    // click on next button
    jQuery('.msform-next-btn').click(function() {
        var parentFieldset = jQuery(this).parents('.msforms-fieldset');
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        var next = jQuery(this);
        var nextmsformsStep = true;
        parentFieldset.find('.msforms-required').each(function(){
            var thisValue = jQuery(this).val();

            if(thisValue == "") {
                jQuery(this).siblings(".msforms-form-error").slideDown();
                nextmsformsStep = false;
            }
            else {
                // Check if the input field is email
                if(jQuery(this).attr('type') == 'email') {
                    // Validate the email
                    if(!validateEmail(thisValue)) {
                        jQuery(this).siblings(".msforms-form-error").slideDown();
                        nextmsformsStep = false;
                    }
                }
                jQuery(this).siblings(".msforms-form-error").slideUp();
            }
        });
        if( nextmsformsStep) {
            next.parents('.msforms-fieldset').removeClass("show","400");
            currentActiveStep.removeClass('active').addClass('activated').next().addClass('active',"400");
            next.parents('.msforms-fieldset').next('.msforms-fieldset').addClass("show","400");
            jQuery(document).find('.msforms-fieldset').each(function(){
                if(jQuery(this).hasClass('show')){
                    var formAtrr = jQuery(this).attr('data-tab-content');
                    jQuery(document).find('.msform-steps .msform-step-item').each(function(){
                        if(jQuery(this).attr('data-attr') == formAtrr){
                            jQuery(this).addClass('active');
                            var innerWidth = jQuery(this).innerWidth();
                            var position = jQuery(this).position();
                            jQuery(document).find('.msform-step-move').css({"left": position.left, "width": innerWidth});
                        }else{
                            jQuery(this).removeClass('active');
                        }
                    });
                }
            });
        }
    });
    //click on previous button
    jQuery('.msform-previous-btn').click(function() {
        var counter = parseInt(jQuery(".msforms-counter").text());;
        var prev =jQuery(this);
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        prev.parents('.msforms-fieldset').removeClass("show","400");
        prev.parents('.msforms-fieldset').prev('.msforms-fieldset').addClass("show","400");
        currentActiveStep.removeClass('active').prev().removeClass('activated').addClass('active',"400");
        jQuery(document).find('.msforms-fieldset').each(function(){
            if(jQuery(this).hasClass('show')){
                var formAtrr = jQuery(this).attr('data-tab-content');
                jQuery(document).find('.msform-steps .msform-step-item').each(function(){
                    if(jQuery(this).attr('data-attr') == formAtrr){
                        jQuery(this).addClass('active');
                        var innerWidth = jQuery(this).innerWidth();
                        var position = jQuery(this).position();
                        jQuery(document).find('.msform-step-move').css({"left": position.left, "width": innerWidth});
                    }else{
                        jQuery(this).removeClass('active');
                    }
                });
            }
        });
    });
   
   
  //click on form submit button
    jQuery(document).on("click",".msform .msform-submit" , function(){
        var parentFieldset = jQuery(this).parents('.msforms-fieldset');
        var currentActiveStep = jQuery(this).parents('.msform').find('.msform-steps .active');
        parentFieldset.find('.msforms-required').each(function() {
            var thisValue = jQuery(this).val();
            if( thisValue == "" ) {
                jQuery(this).siblings(".msforms-form-error").slideDown();
            }
            else {
                jQuery(this).siblings(".msforms-form-error").slideUp();
            }
        });

    });
  
jQuery('#demoform').submit(function() {
    var form = jQuery("#demoform");
    var actionURL = form.attr("action");
    jQuery.ajax({
        type: 'POST',
        url: actionURL,
        data: form.serialize(),
        dataType: 'json',
        success: function(json) {

           jQuery('#jfunction option.spacesforitoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/1b2l9bxp7jey";
                } 
            });

           jQuery('#jfunction option.smartvenueoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/wdwhwzhiuad7";
                } 
            });

            jQuery('#jfunction option.smartworkspaceoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/h2p5pxhr2baj";
                } 
            });

            jQuery('#jfunction option.smartopoption').each(function() {
                if (jQuery(this).prop("selected") == true) {
                              window.location.href = "https://tour.ciscospaces.io/share/hiupogofhcgv";
                } 
            });
           
        }
    })
    return false;
});
    
});

或者您可以简单地将 

type=email
属性添加到您的输入元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.