Validate form with bootstrap (novalidate)

I have a problem validating a form with bootstrap novalidate.
Some form fields include the "required" tag and others do not.

To verify, I submit the form with no data and the ‘was-validated’ class makes all the fields validated, the ones with the "required" tag are marked in red and the others in green.

The idea is to specify which fields to validate instead of the entire form.

Could you help me please?

Form

<form id="Data" method="POST" class="needs-validation mt-0" novalidate>
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Name: <span class="text-danger">*</span></label>
                <input type="text" id="name" name="Name" class="form-control" autocomplete="off" required>
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Lastname: <span class="text-danger">*</span></label>
                <input type="text" id="lastname" name="lastname" class="form-control" autocomplete="off" required>
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Street: <span class="text-danger">*</span></label>
                <input type="number" id="Street" name="Street" class="form-control">
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
</form>

JS

<script type="text/javascript">
    $('#Data').on('submit', function(e){
        e.preventDefault();
        var form = document.getElementById('Data');
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        else {
            $.ajax({
                //url: "",
                type: $('#Data').attr('method'),
                data: $('#Data').serialize(),
                //dataType: 'json',
                beforeSend: function(){ },
                success:function(response) {
                    if (response.success == true) {
                    }
                    else {
                    }
                }
            })
        }
        $('#Data').addClass('was-validated');
    });
</script>

1 thought on “Validate form with bootstrap (novalidate)”

  1. HTML5 offers more input validations than just required. You can define input fields for text, numeric, url, email, etc, set minimum and maximum input length, check input against a regular expressions and so on. The Client-side form validation gives an overview and some great examples. This HTML5 Tutorial has more examples.
    Anything that’s not covered by the standard HTML5 validation has to be done in addition to calling checkValidity().

        var form = document.getElementById('Data');
        formFlag = form.checkValidity();
    
        var customField1 = document.getElementById("customField1");
        if (/* check customField1 for false input */) {
            customField1.classList.add("is-invalid");
            formFlag = false;
        }
    
        var customField2 = document.getElementById("customField2");
        if (/* check customField2 for false input */) {
            customField2.classList.add("is-invalid");
            formFlag = false;
        }
    
        if (!formFlag) {
            e.preventDefault();
            e.stopPropagation();
            return;
        }
    
    Reply

Leave a Comment