Javascript 仅当步骤向导表单中填写了所有字段时，才激活提交按钮

我有一个水平的一页网站，每页都包含多步骤表单，并有一个“下一步”按钮，用于重定向到第二页

我希望用户在填写给定表单中的所有必填字段之前不能进入下一页

以下是简略代码，只能选择有限的月份、年份和国籍：

    <div class="step-content hide">
    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-4" id="artle_tellusmore_label_para" style="float:left;">
                <label id="artle_tellusmore_label">Date of Birth</label id="artle_tellusmore_label">
                <label id="artle_tellusmore_label">Gender</label>

                <hr>
                <div style="margin-left: 38px;" id="artle_tellusmore_profileimageupload">
                    <img style="height: 180px; width:165px;" id="output" src="image/artle_dp_dummy.png">

                </div>
            </div>
            <div style="margin-left: 248px;" class="col-sm-8">
                <div id="artle_date_of_birth_combo_box">
                    <select style="width: 60px;" name="birthday">
                        <option value="">-Day-</option>
                        <option value="">1</option>
                        <option value="">2</option>

                    </select>

                    <select style="width: 91px;" name="birthmonth">
                        <option value="">-Month-</option>
                        <option value="">January</option>
                        <option value="">February</option> 
                    </select>

                    <select style="width: 67px;" name="birthyear">
                        <option value="">-Year-</option>
                        <option value="2007">2007</option>
                        <option value="2006">2006</option>

                    </select>
                </div>
                <div id="artle_tellusmore_gender_radio_button">
                    <input class="radio" type="radio"><span id="">Male</span>&nbsp&nbsp&nbsp&nbsp&nbsp

                    <input class="radio" type="radio"><span id="">Female</span>
                </div>

                <div id="artle_tellusmore_phone_number">

                    <input style="width: 223px; margin-top: 10px; height: 33px;" required="" pattern="[0-9]{10}" x-moz-errormessage="Enter a valid phone number" size="10" value="" placeholder="Phone Number" type="tel">
                </div>

                <div id="artle_tellusmore_nationality">
                    <select name="nationality" style="width: 225px;">
                        <option value="">-- Nationality --</option>
                        <option value="afghan">Afghan</option>
                        <option value="albanian">Albanian</option>

                        <option value="zimbabwean">Zimbabwean</option>
                    </select>
                </div>
                <div id="artle_tellusmore_state">
                    <input type="text" value="" placeholder="State" style="width: 223px; height: 33px;" />

                </div>
                <hr>
                <div id="artle_tellusmore_">
                    <input type="file" name="file" accept="image/*" onchange="loadFile(event)" id="artistprofileuploadfileField">

                    <p style="margin-top: 15px; font-size: 1.1em;">You can upload a jpg, gif or png files</p>
                </div>

            </div>

        </div>
        <div style="clear:both;"></div>
        <button class="next-button btn hide" id="artle_next_button">Next</button>
        <input type="submit" class="submit-button btn" id="artle_next_button" value="Done" />
        <button class="back-button btn" id="artle_next_button">Back</button>
    </div>

</div>

出生日期
性别

-一天-
1.
2.
-月-
一月
二月
-年-
2007
2006
男性
女性
--国籍--
阿富汗人
阿尔巴尼亚语
津巴布韦人

您可以上载jpg、gif或png文件

下一个
返回

通过查看您的html，我认为您没有使用HTML5。我假设您希望验证所有带有类表单字段的表单字段

在这种情况下，您可以使用以下代码：

首先检查所有表单元素是否都有值：

function validateForm(form) {
  var isValid = true;
  $('.form-field').each(function() {
    if ( $(this).val() === '' )
        isValid = false;
  });
  return isValid;
}

然后使用此更改事件跟踪表单元素是否有任何更改，然后验证表单并启用或禁用“下一步”按钮

 $(".form-field").change(function() {
      if (validateForm() )
        $(".next-button").show() 
      else 
        $(".next-button").hide() 
    });

---

请以以上代码为指导

由于缺少您尝试过的代码，无法给出准确答案。但你在找这样的东西

$(document).ready(function(){
    $('form').find('select').change(function() {
        var disabled = false;
        $('form').find('select').each(function() {
            if ($(this).find('option:selected').val() === '') {
                disabled = true;
            }
        });
        $('form').find('input[type="submit"]').prop('disabled', disabled);
    });
});

$("form").submit(function(event) {
    var isValid = true;
    $('input[type="text"]').each(function() {
        if ( $(this).val() === '' )
            isValid = false;            
    });
    if (!isValid) event.preventDefault();
});

---

对于验证所有输入，可以执行以下操作

$(document).ready(function(){
    $('form').find('select').change(function() {
        var disabled = false;
        $('form').find('select').each(function() {
            if ($(this).find('option:selected').val() === '') {
                disabled = true;
            }
        });
        $('form').find('input[type="submit"]').prop('disabled', disabled);
    });
});

$("form").submit(function(event) {
    var isValid = true;
    $('input[type="text"]').each(function() {
        if ( $(this).val() === '' )
            isValid = false;            
    });
    if (!isValid) event.preventDefault();
});

针对所有输入激活提交按钮

$('input[type="text"]').on('input', function() {
    var isValid = true;
    $('input[type="text"]').each(function() {
        if ( $(this).val() === '' )
            isValid = false;            
    });
    if (!isValid) $('input[type="submit"]').attr('disabled','disabled');
    else $('input[type="submit"]').removeAttr('disabled');
});

---

我已经尝试过这个javscript代码：在当前的代码中有什么问题？工作正常。这里使用的类是引导类。您只需修改上面的“下拉列表、单选按钮和复选框”代码即可