Form Can Still Submit

[lapepper]

I have a form to reset a password. I amusing the following two rules:

`<script>bootstrapValidate('#password2', 'matches:#password:Your passwords should match!')</script>

<script>bootstrapValidate('#password', 'regex:^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}:Please match password requirements.')</script>`

The rules are working - BUT you can still SUBMIT the form if they are showing as invalid. Defeats the purpose of the validation.

Using latest version: 2.2.0.

Form:

<form action="reset_password.php" method="POST"> <div class="py-3"> <div class="form-group"> <input type="password" class="form-control form-control-alt form-control-lg" id="password" name="password" placeholder="Password" required> </div> <div class="form-group"> <input type="password" class="form-control form-control-alt form-control-lg" id="password2" name="password2" placeholder="Confirm Password" required> <small class="form-text text-muted">Your password MUST contain: at least 1 lowercase alphabetical character, at least 1 uppercase alphabetical character, at least 1 numeric character, and be eight characters or longer.</small> </div> </div> <div class="form-group row"> <div class="col-md-6 col-xl-5"> <button type="submit" class="btn btn-block btn-alt-primary"> <i class="si si-fw si-reload mr-1"></i> Reset </button> </div> </div> </form>
What am I doing wrong? What do I need to do to only allow submission if the rules are met?

[PascaleBeier]

see #65

[dominicklee]

@lapepper If you are still looking for a solution for this, you can do the following:

1. Give your form an ID so that you can refer to it in Javascript.
2. Then write event.preventDefault() so that the form won't be submitted when the user clicks submit.
3. Write a new function called validateForm() that is supposed to submit the form once it's valid.
4. Include jQuery in your HTML. You will need it to find "form errors".

Let's put this all together:

Here is an example of your form tag:

<form method="POST" id="formSignup" onsubmit="event.preventDefault(); validateForm();">
</form>

Add this code before your </body> tag:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script>
	function validateForm()
	{
		//Find the number of form errors shown
		var numInvalid = $( "#formSignup" ).find( ".invalid-feedback:not(:hidden)" ).length;

		if (numInvalid == 0) {
			//No errors, submit form
			document.getElementById("formSignup").submit();	//All is good. Submit form.
		}
		else {
			//Errors found, do not submit
		}
	}
</script>

I hope this helps anyone who still wants to use this wonderful library, without waiting for the new version.