Required class not working on select in template wizard

Question

I am using template wizard form plugin.

The select gets its options values dynamically appended on the page load event. I have added required class to select, when I click next button without filling any values in all textboxes and keeping select default (0), all the default validation

"This feild is required."

of this plugin appears on the top of all textboxes but does not work for select (category field).

HTML:

<form class="form-horizontal" id="form" onsubmit="return validateform()" method='post' action="./?action=savebookdetails" class="wizard-big">
    <h1>Book Details</h1>
    <fieldset>
        ... ...
        <div class="form-group">
            <label class="col-sm-3 control-label">ISBN *</label>
            <div class="col-sm-9">
                <input name="isbn" id="isbn" value="<?php if($result != '') echo $result->isbn; ?>" type="text" class="form-control only-numbers required" maxlength="11">
            </div>
        </div>
        <div class="form-group" id="dob">
            <label class="col-sm-3 control-label">Category *</label>
            <div class="col-sm-9">
                <select class="form-control required" onchange="fetchsubcategories(this.value)" id="category" name="category">
                    <option value="0">Select</option>
                </select>
            </div>
        </div>
    </fieldset>
</form>

In jQuery:

$("#wizard").steps();
$("#form").steps({
    bodyTag: "fieldset",
    onStepChanging: function(event, currentIndex, newIndex) {
        if (currentIndex > newIndex) {
            return true;
        }
        var form = $(this);
        if (currentIndex < newIndex) {
            $(".body:eq(" + newIndex + ") label.error", form).remove();
            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
        }
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onStepChanged: function(event, currentIndex, priorIndex) {
        if (currentIndex === 2 && priorIndex === 3) {
            $(this).steps("previous");
        }
    },
    onFinishing: function(event, currentIndex) {
        var form = $(this);
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function(event, currentIndex) {
        var form = $(this);
        form.submit();
    },
    onCanceled: function(event) {
        window.history.go(-1);
    }
}).validate({
    errorPlacement: function(error, element) {
        element.before(error);
    }
});

which plugin are you using? It would be better if you add a working code snippet or a fiddle and trim any unwanted code (i see php and fetchsubcategories function which is not provided in the question ) — n4m31ess_c0d3r, Nov 30 '17 at 09:35
I am using http://www.jquery-steps.com/Examples#vertical plugin — Nida, Nov 30 '17 at 09:40

score 1 · Answer 1 · answered Nov 30 '17 at 09:34

1

<option value="0">Select</option>

remove 0 from value in select first option New Code

<option value="">Select</option>

answered Nov 30 '17 at 09:34

Maulik

104
7

score 0 · Answer 2 · edited Nov 30 '17 at 10:21

Form validation with out using jquery.validaiton plugin. You should set class name same for all field.

For example:

<input class="form-control amount validate_form" name="amount[]" type="text">
<p class="validateError" style="color:red;display:none;">please enter amount.</p>
<button type="submit" id="fees_stream_submit" class="btn btn-primary">Submit</a>

<script type="text/javascript">
    $(document).on('click', '#fees_stream_submit', function(e) {
    e.preventDefault();
    $(".validate_form").each(function() {
        var selectedTr = $(this);
        i = 0;
        var value = $(this).val();
        if (!value) {
            selectedTr.next("p").show();
            i++;
        } else {
            selectedTr.next("p").hide();
        }
    });

    if (i == 0) {
        $('#fees_stream_form').submit();
    }
});
</script>

Required class not working on select in template wizard

2 Answers2