FormsBootstrap
A Laravel library to generate forms based on Laravel Collective Forms & HTML, Boostrap 5 CSS Framework, RichText editor, and Icons provided by FontAwesome. Current version: 3.0.3. Project on GitHub. Project on Packagist. Manages also results inputs of packages DateRangePickerHelper, Uploader, and Tags input. Includes form management and validation. This demosite sources available here.
Password input
Single input
In this example we submit two inputs to our form:
- first input is required; it is submitted to form and validated by Laravel validation rules;
- second input is required and is validated by your browser before it is sent to the script
Example 1 could be used for a login form. Characters sent to form are obfuscated. In this case, your form validation does not need verify password validation rules. But you need validate your password if your form is used to change the password. Example 2 verifies password before it is sent to form; it should not be used for a login form.
Password validation rules are following:
- Password must contain min. 8 characters and max. 80 characters;
- Password must contain a lower case character;
- Password must contain an upper case character;
- Password must contain a number;
- Password must contain a symbol, like ^!?-_§=@$£¢€&§°[]{}*#%/\.;,:+|().
You can easily modify theses rules. For instance, a strong password should be at least 12 characters long. To change the validation regular expression, we recommend the use of a online regex editor which validates rules and explains the different segments, such as regex101.com.
{!! Form::bsPassword([
'required' => true, // password is required
'id' => 'pass1', // field id and name
'validate' => false //no password rules check, e.g. if used to enter user pass for identification
]) !!}
{!! Form::bsPassword([
'labeltext' =>'Password with validation',
'id' => 'pass2',
'validate' => true // password is both required and validated
]) !!}
Output:
<div class="mb-3" id="fg-pass1">
<label for="pass1" class="form-label">Password</label>
<input type="password" name="pass1" value="" id="pass1" class="form-control verify resettext" />
<div class="invalid-feedback">Password is invalid or empty</div>
</div>
<script>
jQuery("#pass1").sebPasswordHelper({passregex : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\^!\-_?§=@$&§°\[\]{}£¢€*#%\/\\.;,:+|()])[A-Za-z\d\^!\-_\?§=@$&\§°\[\]{}£¢€*#%\/\\.;,:+|()]{8,80}$/});
</script>
<div class="mb-3" id="fg-pass2">
<label for="pass2" class="form-label">Password with validation</label>
<input type="password" name="pass2" value="" id="pass2" class="form-control verify-pass resettext" />
<div class="invalid-feedback">Password is invalid or empty</div>
</div>
<script>
jQuery("#pass2").sebPasswordHelper({passregex : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\^!\-_?§=@$&§°\[\]{}£¢€*#%\/\\.;,:+|()])[A-Za-z\d\^!\-_\?§=@$&\§°\[\]{}£¢€*#%\/\\.;,:+|()]{8,80}$/});
</script>
Password with confirm
In this example, a single function sets up a complete password change procedure. Old password check is optional; in the above example, password check is randomly true or false; therefore you may tray several time to validate form. You can also disable password generation and/or diplay password option.
{!! Form::bsPasswordWithConfirm(['checkoldpassurl' => route('formsbootstrap_checkoldpass')]) !!}
Output:
<div class="mb-3" id="fg-old_password">
<label for="old_password" class="form-label">Old Password</label>
<input type="password" name="old_password" value="" id="old_password" class="form-control verify-pass-old resettext" autocomplete="current-password" data-maininput="#password" />
<div class="invalid-feedback">Old password incorrect or empty</div>
</div>
<div class="mb-3" id="fg-password">
<label for="password" class="form-label">New Password</label>
<div class="input-group password-div" id="password-hidden-div">
<input type="password" name="password" value="" id="password" class="form-control verify-pass resettext" autocomplete="new-password" />
<button type="button" class="btn btn-primary password-btn" title="Display / Hide password"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-outline-secondary password-gen" title="Generate new password"><i class="fa-solid fa-gears"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Show password rules" data-bs-toggle="modal" data-bs-target="#password-rule-modal"><i class="fa-solid fa-ruler"></i></button>
<div class="invalid-feedback">Password is invalid or empty</div>
</div>
<div class="input-group password-div" id="password-clear-div" style="display:none">
<input type="text" name="password_clear" value="" id="password_clear" class="form-control" />
<button type="button" class="btn btn-primary password-btn" title="Display / Hide password"><i class="far fa-eye-slash"></i></button>
<button type="button" class="btn btn-outline-secondary password-gen" title="Generate new password"><i class="fa-solid fa-gears"></i></button>
<button type="button" class="btn btn-outline-secondary" title="Show password rules" data-bs-toggle="modal" data-bs-target="#password-rule-modal"><i class="fa-solid fa-ruler"></i></button>
</div>
</div>
<div class="modal fade" id="password-rule-modal" tabindex="-1" aria-labelledby="password-rule-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="password-rule-label">Password rules</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" title="Close"></button>
</div>
<div class="modal-body">
<p>Password must contain:</p>
<ul>
<li>min. 8 characters and max. 80 characters</li>
<li>at least one lower case character and one upper case character</li>
<li>at least one number</li>
<li>at least one symbol character among ^!?-_§=@$£¢€&§°[]{}*#%/\.;,:+|()</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mb-3" id="fg-password_confirmation">
<label for="password_confirmation" class="form-label">Confirm Password</label>
<input type="password" name="password_confirmation" value="" id="password_confirmation" class="form-control verify-pass-match resettext" data-maininput="#password" />
<div class="invalid-feedback">Confirmation missing or does not match with password</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery("#password").sebPasswordHelper({
passregex : /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\^!\-_?§=@$&§°\[\]{}£¢€*#%\/\\.;,:+|()])[A-Za-z\d\^!\-_\?§=@$&\§°\[\]{}£¢€*#%\/\\.;,:+|()]{8,80}$/,
passchars : "123456789ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz^!?-§=@$£¢€&§°[]{}*#%/\\.;,:+|()",
genlength : 12,
confirminput : "#password_confirmation",
clearinput : "#password_clear",
oldinput : "#old_password",
checkoldpassurl : "https://sebastien.lhaire.org/formsbootstrap/checkoldpass",
checkoldpass_callback : null,
csrf : "TGeMjg3Ryq6Vu0pNy1aJvz63TRvE8FhPPCU0qbnj",
});
});
</script>