Monday, May 20, 2024
Homepage · jquery
 Popular · Latest · Hot · Upcoming
179
rated 0 times [  180] [ 1]  / answers: 1 / hits: 94327  / 7 Years ago, tue, april 18, 2017, 12:00:00

I'm a beginner with bootstrap and I have seen a lot of bootstrap 3 form validation plugins etc, but I haven't found any for bootstrap 4.



I'm trying to validate multiple forms, and here is my code:





<!-- Contact -->

<div class=container white>

  <div class=row>

    <div class=container white percent100>

      <div class=col-lg-12>

        <div class=padder-t2>

          <h1>Contact</h1>

          <div class=horiz-divider></div>

        </div>

      </div>

    </div>

  </div>

  <div class=row padder-t padder-b>

    <div class=container white>

      <div class=col-lg-12>

        <!-- Form -->

        <form class=form-horizontal action=  method=post id=contact_form>

          <fieldset>

            <!-- Text input-->

            <div class=form-group>

              <div class=row>

                <div class=col-md-4 col-lg-4>

                  <label class=control-label pull-right><h4>First Name</h4></label>

                </div>

                <div class=col-md-4 col-lg-4 inputGroupContainer>

                  <div class=input-group>

                    <span class=input-group-addon><i class=fa fa-user></i></span>

                    <input id=firstname name=firstname placeholder=First Name class=form-control type=text>

                  </div>

                </div>

              </div>

            </div>

            <!-- Text input-->

            <div class=form-group>

              <div class=row>

                <div class=col-md-4 col-lg-4>

                  <label class=control-label pull-right><h4>Last Name</h4></label>

                </div>

                <div class=col-md-4 col-lg-4 inputGroupContainer>

                  <div class=input-group>

                    <span class=input-group-addon><i class=fa fa-user></i></span>

                    <input id=lastname name=lastname placeholder=Last Name class=form-control type=text>

                  </div>

                </div>

              </div>

            </div>

            <!-- Text input-->

            <div class=form-group>

              <div class=row>

                <div class=col-md-4 col-lg-4>

                  <label class=control-label pull-right><h4>E-Mail</h4></label>

                </div>

                <div class=col-md-4 col-lg-4 inputGroupContainer>

                  <div class=input-group>

                    <span class=input-group-addon><i class=fa fa-envelope></i></span>

                    <input id=email name=email placeholder=E-Mail Address class=form-control type=email>

                  </div>

                </div>

              </div>

            </div>

            <!-- Text input-->

            <div class=form-group>

              <div class=row>

                <div class=col-md-4 col-lg-4>

                  <label class=control-label pull-right><h4>Phone #</h4></label>

                </div>

                <div class=col-md-4 col-lg-4 inputGroupContainer>

                  <div class=input-group>

                    <span class=input-group-addon><i class=fa fa-phone></i></span>

                    <input id=phone name=phone placeholder=Phone class=form-control type=text>

                  </div>

                </div>

              </div>

            </div>

            <!-- Text area -->

            <div class=form-group>

              <div class=row>

                <div class=col-md-4 col-lg-4>

                  <label class=control-label pull-right><h4>Message</h4></label>

                </div>

                <div class=col-md-4 col-lg-5 inputGroupContainer>

                  <div class=input-group>

                    <span class=input-group-addon><i class=fa fa-pencil></i></span>

                    <textarea id=comment class=form-control name=comment placeholder=Your Message></textarea>

                  </div>

                </div>

              </div>

            </div>

            <!-- Success message -->

            <div class=alert alert-success role=alert id=success_message>Success <i class=fa fa-thumbs-up></i> Thanks for contacting us, we will get back to you shortly.</div>

            <!-- Button -->

            <div class=form-group>

              <div class=row>

                <label class=col-md-4 col-lg-4 control-label></label>

                <div class=col-md-4 col-lg-4>

                  <button type=submit class=btn btn-danger raised>Send <i class=fa fa-paper-plane></i></button>

                </div>

              </div>

            </div>

          </fieldset>

        </form>

      </div>

    </div>

  </div>

  <div class=row padder-b>

    <div class=row col-lg-12>

      <div class=col-md-3 col-lg-3></div>

      <h4 class=col-md-9 col-lg-9>Contact us directly:</h4>

    </div>

    <div class=row col-lg-12>

      <div class=col-md-3 col-lg-3></div>

      <h4 class=col-md-2 col-lg-2 padder-lr>Mail:</h4>

      <a class=col-md-6 col-lg-6 padder-lr href=mailto:[email protected]>

        <h4 id=mail>[email protected]</h4>

      </a>

    </div>

    <div class=row col-lg-12>

      <div class=col-md-3 col-lg-3></div>

      <h4 class=col-md-2 col-lg-2 padder-lr>Adress:</h4>

      <h4 class=col-md-6 col-lg-6 padder-lr id=adress>2 LoremIpsum Road, 67000 City - Country</h4>

    </div>

  </div>

</div>





I have tried to modify existing js, but I had no luck.



Here is the rendered form:



jsfiddle of the form


More From » jquery
 Answers
96

First I solved my issue with an external library like Jonathan Dion suggested. But recently I came across this :



Bootstrap v4.0 introduced their own form validation that you can still pair with backend php validation. From the Doc :



<form class=needs-validation novalidate>

  <div class=form-row>

    <div class=col-md-4 mb-3>

      <label for=validationCustom01>First name</label>

      <input type=text class=form-control id=validationCustom01 placeholder=First name value=Mark required>

      <div class=valid-feedback>

        Looks good!

      </div>

      <div class=invalid-feedback>

        Doesn't look good!

      </div>

    </div>

  </div>

</div>


Then using JS :



<script>

// Example starter JavaScript for disabling form submissions if there are invalid fields

(function() {

  'use strict';

  window.addEventListener('load', function() {

    // Fetch all the forms we want to apply custom Bootstrap validation styles to

    var forms = document.getElementsByClassName('needs-validation');

    // Loop over them and prevent submission

    var validation = Array.prototype.filter.call(forms, function(form) {

      form.addEventListener('submit', function(event) {

        if (form.checkValidity() === false) {

          event.preventDefault();

          event.stopPropagation();

        }

        form.classList.add('was-validated');

      }, false);

    });

  }, false);

})();

</script>


This provides input border colorating and displays the valid / invalid feedback blocks according to the given pattern or properties. It is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.


[#58106] Sunday, April 16, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dylondaytond
Add To Favorites
Follow
Total Points: 92
Total Questions: 88
Total Answers: 96
Location: China
Member since Fri, Jan 15, 2021
3 Years ago
dylondaytond questions
Fri, Jun 10, 22, 00:00, 2 Years ago
Tue, Jun 22, 21, 00:00, 3 Years ago
Tue, Sep 22, 20, 00:00, 4 Years ago
Thu, May 7, 20, 00:00, 4 Years ago
Fri, Feb 21, 20, 00:00, 4 Years ago
View All
;