Hi,
I'm happy to give you an example of how to post as ajax after the checks are done.

My Ajax form post example:

 $(document).ready(function(){
        $(".UrunSorgula").click(function(){
            var data = $("#UrunSorgula").serialize();
            $.ajax({
                type  : "POST",
                url   : "ajax/urun_sorgula.php?page=UrunSorgula",
                data  : data,
                success : function(cevap)
                {
               $(".UrunSorgulaSonuc").html(cevap);
               //document.forms["UrunSorgula"].submit(); //first submit
                document.forms["UrunSorgula"].reset(); //and then reset the form values
                }    
              });
            return false;
        });
    });

Thank you

Hi there,
In addition to client-side validation (which you did nicely), I want to add another step to validate the input on the server. As an example, suppose I wanna check for an email as username.
The first step would be checking the email format (browser side), and if the email format was correct, I wanna send the field value to the server (without pressing on submit button - it should be done as the next step of validation), to make sure this email was not taken before.
Can you tell me how to implement this feature?

Every bootstrapValidate() method call should be emitting events for invalidity and validity.

It is better to be as Validating after clicked the submit button.
Because for an example,
In email validation, the validation message comes when I started to typing. It's feels not good while typing first.
May be the user going to do the thing calmly, then the Red colored messages comes in he maybe feels scared.

My request is, the function should work after click the submit.
I manually tried many times, since I started web development recently it's bit hard to do.

I'm currently in the process of undertaking a complete refactor of this library to solve some problems:

Problems to be solved

• Usage is ... ugly. I dislike it how you assemble a super big string with rules and options
• Maintaining two different versions for Bootstrap 3 and 4 sucks.

Features

• The user should be able to use any Bootstrap Version and to switch between these
• The user should be able to customize the error output

Ideas

The new API could look like this:

BootstrapValidate.usePreset(BootstrapValidate.Presets.Bootstrap4)

const myPreset = {};

BootstrapValidate.usePreset(myPreset);

Users should be able to set the Preset per Input / Form as well.

However I'm not entirely certain of how the user sets the rules. A more form oriented approach would be cool, where the user maps fields to rules, somewhat like:

new BootstrapValidate('#myForm', {
  fields: [
    '#email': {
      rules: [
        BootstrapValidate.Email('Enter a valid email address'),
        BootstrapValidate.Min(20, 'Enter at least 20 Characters')
      ]   
   }
  ]
}

I appreciate any input!

As stated in the README, we actually should do this:

The following arguments are the required rule parameters: max only requires a number.

Which is not really the case atm.

https://github.com/PascaleBeier/bootstrap-validate/blob/master/src/validate.js#L14
Thinking of a rule named required which would only take the input as argument and received 2 arguments in the function call.

The validationMessage only holds the latest error message.

https://imghostr.com/aGdsmDac

jquery-3.3.1.min.js:2 Uncaught ReferenceError: bootstrapValidate is not defined
at HTMLDocument. (signup:207)
at l (jquery-3.3.1.min.js:2)
at c (jquery-3.3.1.min.js:2)

How can I check if the validation is true?

Only adding

bootstrapValidate('.form-control.email', 'required|email:Enter a valid E-Mail!');

Is not enough. I need something like (I have to prevent the default form submit or check before an ajax request):

if (bootstrapValidate.allValidationsAreTrue()) {
...
}

The GitHub release page show a version 1.1.0 published on Mar 29, 2018 but this version does not appear in changelog neither as default download link for v1.

What is this release?

For example:

<div class="form-group">
    <label class="control-label col-sm-2">Label</label>
    <div class="col-sm-10">
         <input class="form-control">
     </div>
</div>

In that case, the error class is added to the direct parent of the input, which would be div.col-sm-10.

I notice when pulling in bootstrap-validate using yarn add bootstrap-validate I get version 2.1.3 but as per documentation, latest version seems to be: 2.2.0

  <script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js" ></script>

All field in the form

bootstrapValidate('#address_from', 'rule', function (isValid) { if (isValid) { //do something } else { alert('Not valide'); return false; } });

Currently, the form submits even when there are errors present. Is there a way to check for errors before submitting the form?

I should be adding integrational tests aswell.

Might be a good idea to make bootstrap apply error styles to labels as well.

Hi, is there any way to display error message when the focus for the current input is lost ?
thanks for your works ;-)

The "matches" rule returns an undefined error.
bootstrap-validate 1.0.11, bootstrap 3.3.7

html
<div class="form-group">
<label for="inputMatch1" class="control-label col-sm-2">type some stuff</label>
<div class="col-sm-10">
<input id="inputMatch1" type="text" class="form-control">
</div>
<label for="inputMatch2" class="control-label col-sm-2">type the same stuff</label>
<div class="col-sm-10">
<input id="inputMatch2" type="text" class="form-control">
</div>
</div>

javascript
bootstrapValidate( '#inputMatch2', 'matches:#inputMatch1:type the text from the callback test' );

The current version does not validate <textarea> fields.

Hi, I used this:
bootstrapValidate( '#docs-demo', 'email:Enter a valid E-Mail Address!' );
bootstrapValidate( '#docs-demo', 'required:Please fill out this field!' );
And it works, It will display invalid messages
But return form submitting too,
how i can fix it ?
thanks

Hi! How may i call a custom js function?

^4[0-9]{12}(?:[0-9]{3})?$ works
^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14})$ does not

I noticed that parseFloat is used for validation.
This means that 00aa is considered a valid integer which obviously is not.

Stef

We should notify users if they provide falsy arguments via console.warn.

Is there anyway to remove a rule once added? In cases where you have some conditional requirements for a rule. I.E. This input is only required if X input is filled in and Y input equals such and such type of thing.

I'd love to see a rule to validate telephone numbers.

• Get some time on writing the docs :)
• Add Info for ES6 Environments
• Add Info on how to Contribute
• Add Code snippets
• Add more usage examples; ideally of every rule and real world examples

• before(date, dateFormat)
• after (date, dateFormat)
• date(format)
• regexp(regexp)
• phone (format)
• file(extension)
• divisible (#9 (comment))
• url
  URL Validation
• matches
  Two fields that should match, e.q. for password confirmations. The v1 API makes that super fuzzy.
• endswith(string)
  Ensure a given string ends with a given string
• startswith(string)
  Same as above but starting with
• contains(string)

👍

Hi there,

I have a form I'm working on which requires a numeric range so I think currently the regex option is probably the only route for me to go but I feel like the website may need some more examples since the regex I have doesn't seem to be working as expected.

So I was hoping maybe to make the overall process easier, if there was a new numeric range option where users could provide both min and max values (and enable floating point or just require integers) that would meet my needs currently.

Another quick note is that if I have a field set to be required, but that message does not appear if I load the page and quickly hit submit...it only appears when I type something in and then use backspace and erase everything.

Thank you for your work on this :-)!

I would like a rule to compare two fields that the value is equal, passing parameters by the id of the two fields. Thanks.

I'd like the user to be able to choose an error icon per input.
Also, he needs to be able to set choose a custom icon provider, e.g. font-awesome.

For the initial Release of 1.1.0, bootstrap icons and font-awesome would be sufficient.

The API might look like this:

<script>
// Default Bootstrap Icon
bootstrapValidate(document.getElementById('email'), 'email', { icon: true });
// Another Bootstrap Icon
bootstrapValidate(document.getElementById('email'), 'email', { icon: 'glyphicon glyphicon-asterisk'});
// Font Awesome Icon
bootstrapValidate(document.getElementById('email'), 'email', { icon: 'fa-error', provider: 'font-awesome' });
</script>

This way, one had to programmatically maintain different icon providers.

I am using bootstrap 4.1 and I have an issue with your first example that you put on website..When I start to type some invalid text in email field I am getting an erorr in my visual studio - object does not support object 'closest'

When using a RegExp based input (tested with alphanum and ISO8601) an empty input is not allowed if something was filled in.

So when you fill in the field with wrong input, the invalid state is triggered.
But when you clear the input, the invalid state is not removed.

Stef

This enables users to apply the same rule to multiple elements, e.g.:

bootstrapValidate(['#prename', '#lastname'], 'min:20:Enter at least 20 Characters.');

I got this error Uncaught TypeError:__WEBPACK_IMPORTED_MODULE_2_bootstrap_validate__ is not a function
via code below

import * as bootstrapValidate from 'bootstrap-validate'

bootstrapValidate('#test', 'required')

ps: this is obviously wrong syntax import * from 'bootstrap-validate' as bootstrapValidate;
https://bootstrap-validate.js.org/installation.html

bootstrapValidate('#myInput', 'rule', function (isValid) {
if (isValid) {
alert('Element is valid');
} else {
alert('Element is invalid');
}
});

Callback function doesn't execute

Missing a method to trigger validation by clicking on a button, ie:

function checkFormSubmit(){
bootstrapValidate('#tbEmail').validate();
}

Hello,
after validation it would be perfect to change the input class from: is-invalid to is-valid.
This would stylize the input border color from red to green. At the moment it just removes the is-invalid, which utter in a red border-color changing to default input border.
Thanks, malmr

Currently all the DOM Manipulations happen in error.js which is really fuzzy.

Should be changed into ElementModification.js or something to simplify validation for elements other than input in the future.

Hello,
first of all thanks a lot for this library, it has been a lot of help .. but i'm having this issue where i want to trigger input errors on submit and prevent submitting?
I tried calling bootstrapValidate inside $('#myForm').submit(function (event){} but it seemed that it's not triggering the errors only making the function start the validations!
Anything that I'm missing ?

best regards !

Since the first Bootstrap 4 Beta shipped bootstrap-validate should support the latest branch.

I am using the following regex

bootstrapValidate('#inputfield', 'regex:/^(my:track:[a-zA-Z0-9]{22}$)/:Invalid')

The issue is I am using : inside the regex match which conflicts with the separator options.

How can I stop the : regex conflicting? Thanks!

How should I call the bootstrapValidate function in Angular CLI ? Angular will not allow the calling of script tags inside the template of component.

It's quite convenient to be able to write

bootstrapValidate('#email', 'email:Enter a valid mail adress');

vs

bootstrapValidate(document.querySelector('#email'), 'email:Enter a valid mail adress');

Putting in multiple rules of the same type leads to only the last one being evaluated.

Example for replication:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<body>

<div class="form-group">
        <label class="control-label">Enter a Name</label>
        <input id="name" />
</div>
<script src="assets/bootstrap-validate/dist/bootstrap-validate.js"></script>
<script>
        bootstrapValidate('#name', 'regex:[a-z]:Must have lowercase|regex:[A-Z]:must have uppercase');
    </script>
</body>

How to replicate the problem:
2 Fields: LogonID1, LogonID2
Code:
bootstrapValidate('#LogonID2', 'matches:#LogonID1: Logon IDs do not match.');

User will input a username in LogonID1 field incorrectly 'user123', then input correct username 'user1234' into LogonID2. User will then update LogonID1 field to 'user1234' and the error message will not go away.

Check for nonexisting rules or incorrect options.

Doesn't work
Rule I apply : "regex:(xlsx|png)+$:Please upload xlsx file !"
Uncaught TypeError: Cannot read property 'apply' of undefined

This work
Rule I apply : "regex:(xlsx)+$:Please upload xlsx file !"

Any solution ?