0

I don't know how this happened, but on one of my form which is inside a Bootstrap Modal, the Validator Error Message appears with an alert like this: enter image description here

I just didn't find why it's like that, and I didn't find a way to reproduce it, even with a copy/paste of the code.

The HTML code is:

        <form action="" name="FormAddress" id="FormAddress" method="post" data-toggle="validator">
    <input id="do" name="do" value="address_add" type="hidden">
    <input id="InputAddressId" name="InputAddressId" value="" type="hidden">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon warning">Address name</span>
            <input value="" id="InputName" name="InputName" placeholder="Home, Billing, Holidays..." class="form-control" data-minlength="2" data-error="Not long enough" required="" type="text">      
        </div>
    </div>
    <hr style="border-top: 2px solid #8c8b8b;">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon">Line 1</span>
            <input value="" id="InputLine1" name="InputLine1" class="form-control" data-minlength="2" data-error="Not long enough" required="" type="text">      
        </div>
    </div>
    <div class="form-group pad-t-10">
        <div class="input-group">
            <span class="input-group-addon">Line 2</span>
            <input value="" id="InputLine2" name="InputLine2" class="form-control" data-minlength="2" data-error="Not long enough" type="text">      
        </div>
    </div>
...
    <div class="form-group mar-t-0 mar-b-20">
        <button type="submit" id="BtAddress" class="btn btn-primary" style="margin:0px;" data-loading-text="<i class='fa fa-spinner fa-spin fa-lg fa-spin-fix'></i> &nbsp; Send in progress">Send</button>
    </div>
    </form>

Some jQuery on submit form:

    $(document).on("submit", "#FormAddress", function(e){
        loadingButton($("#BtAddress"));
        var values = {"InputName": $("#InputName").val(), "InputLine1": $("#InputLine1").val(),
                      "InputLine2": $("#InputLine2").val(), "InputCity": $("#InputCity").val(),
etc...
        $.ajax({
            url: "account/details/ajax/ajax_address.php",
            type: "POST",
            data: values,
            success: function(data) {
                $("#AjaxAddress div").remove();
                $("#AjaxAddress").html("").html(data);
            },
            error: function(exception) { console.log(exception); }
        });
        e.preventDefault();
    });

And a validator plugin:

<script defer src="include/plugins/js/validator.min.js"></script>

Which is: https://github.com/1000hz/bootstrap-validator or official website: http://1000hz.github.io/bootstrap-validator/

It's like I tried every thing to reproduce this Alert error behaviour but this no success.

Does anyone know how to get such alerts?

London Smith
  • 1,622
  • 2
  • 18
  • 39
  • If I am to guess, the required="" should be required="true" for the id="InputName". – Vladimir M Jan 22 '17 at 10:53
  • This code and this form is working great, it's just I can't figure out how to reproduce it with this alert "popup" on field error. Actually I just put `required` on the form, the browser add itself `=""` – London Smith Jan 22 '17 at 11:05
  • Sicne you dont have the whole code here, its a guess work. Essentially, you see a tooltip. So, something like this [tooltip for validator](http://stackoverflow.com/questions/14741688/how-to-display-messages-from-jquery-validate-plugin-inside-of-tooltipster-toolti) Could be hiding in your code. – Vladimir M Jan 22 '17 at 11:19

0 Answers0