javascript - Wordpress自定义表单输入检查

Question

我在 wordpress 中制作了一个自定义联系表单，用户必须在其中逐步填写输入内容。

我已经为每个步骤设置了字段，但需要一些输入，我想检查输入值是否为空，然后让它停止。我自己尝试了一些带有警报的东西，但无论它是空的还是充满的，它都会给我警报，在我点击警报上的确定后，它仍然继续进行下一步，而我不希望那样。

我希望有人能帮助我开始这方面的工作。

编辑:我添加了我之前尝试过的 jQuery。

HTML:

<div class="msform">

    <!-- progressbar -->
    <ul class="progressbar-form">
        <li class="active">Name &amp; Company Name</li>
        <li>E-mail &amp; Phone</li>
        <li>Amount &amp; Date</li>
        <li>Subject</li>
        <li>Comments &amp; Send</li>
    </ul>

    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">Step 1</h2>
        <h3 class="fs-subtitle">Fill out your name and company name.</h3>
        [text* your-name class:required placeholder "Name*"] <!-- shortcode for wordpress form -->
        [text your-company placeholder "Company name"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="next" class="next action-button-form" value="Next" />    
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 2</h2>
        <h3 class="fs-subtitle">Fill out your e-mail and phonenumber.</h3>   
        [email* your-email class:required placeholder "E-mail*"]
        [tel* your-tel class:required placeholder "Phonenumber*"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 3</h2>
        <h3 class="fs-subtitle">Fill out your amount and preferred date.</h3>    
        [number your-amount min:1 max:10 placeholder "Amount"]
        [date your-date min:2018-03-01 placeholder "Date"]
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Step 4</h2>
        <h3 class="fs-subtitle">Fill out your subject.</h3>   
        [text* your-message class:required placeholder "Subject*"]
        <p style="color:#094076;">* = required</p>
        <input type="button" name="previous" class="previous action-button-form" value="Previous" />
        <input type="button" name="next" class="next action-button-form" value="Next" />
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Details</h2>
        <h3 class="fs-subtitle">Questions or comments about this form?</h3>
        [textarea your-details placeholder "Questions / Comments"]
        <input type="button" name="previous" class="previous action-button-form" value="Previous" /> [submit class:next class:submit-form class:action-button-form "Verzenden"]
    </fieldset>

    <fieldset>
        <h2 class="fs-title">Thank you!</h2>
        <h3 class="fs-subtitle">Your message has been sent.</h3>
    </fieldset>
</div>    

jQuery:

//jQuery
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type="text/javascript"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>

//jQuery Easing script
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

//jQuery Form Script (WP syntax)
<script type='text/javascript'>
    jQuery(document).ready(function(){

       // Disabling the enter-button to prevent premature sending
        jQuery('.msform').on('keyup keypress', function (e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode === 13) {
                e.preventDefault();
                return false;
            }
        });

    var current_fs, next_fs, previous_fs; // Fieldsets
    var left, opacity, scale; // Fieldset styling
    var animating; // Prevent multi-click glitching

    jQuery(".next").click(function () { 
        if (animating) return false;
        if( !jQuery('input.required').val() ) {
           alert('warning');
           return false;
        }

        animating = true; 

        current_fs = jQuery(this).parent().parent();
        next_fs = jQuery(this).parent().parent().next();

        jQuery(".progressbar-form li").eq(jQuery("fieldset").index(next_fs)).addClass("active");

        next_fs.show();

        current_fs.animate({opacity: 0 }, {
            step: function (now, mx) {
                //1. Scale current_fs to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. Let next_fs come in from right (50%)
                left = (now * 50) + "%";
                //3. Set opacity of next_fs to 1 when entering.
                opacity = 1 - now;
                current_fs.css({'transform': 'scale(' + scale + ')' });
                next_fs.css({'left': left, 'opacity': opacity });
            },
            duration: 800, 
            complete: function () {
                current_fs.hide();
                animating = false; 
            },
            easing: 'easeInOutBack'
        });       
    });


    jQuery(".previous").click(function () {
        if (animating) return false;
        animating = true;

        current_fs = $(this).parent().parent();
        previous_fs = $(this).parent().parent().prev();

        jQuery(".progressbar-form li").eq(jQuery("fieldset").index(current_fs)).removeClass("active");

        previous_fs.show();
        current_fs.animate({opacity: 0 }, {
            step: function (now, mx) {    
                scale = 0.8 + (1 - now) * 0.2;
                left = ((1 - now) * 50) + "%";
                opacity = 1 - now;
                current_fs.css({'left': left });
                previous_fs.css({'transform': 'scale(' + scale + ')', 'opacity': opacity });
            },
            duration: 800,
            complete: function () {
                current_fs.hide();
                animating = false;
            },
            easing: 'easeInOutBack'
        });
    });
});
</script>

为了防止这篇文章变得更长，我省略了 CSS。

Here's a fiddle even tho it doesnt work because its wordpress stuff

Answer 1

StackOverflow 相对较新，但如果我正确理解你的问题，你可能会使用以下内容:

if($('.input1').val()){
Your Code here
}

这基本上检查 input1 是否有内容，无论是复选框还是文本。

这可能是您要找的东西，也许不是，但嘿嘿，值得一试:P

希望这对您有所帮助!