Comparing passwords in Twitter Bootstrap for validation purposes

Question

Comparing passwords in Twitter Bootstrap for validation purposes

After creating a simple form with Twitter Bootstrap, I managed to incorporate some validation as well.

<form class="form-signin">            
<input type="email" class="input-block-level" placeholder="Email address" required="">
<input type="password" class="input-block-level" placeholder="Password" required="">
<input type="password" class="input-block-level" placeholder="Confirm Password" required="">
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>

In my search for examples, I haven't come across anyone implementing password comparison validation. I'm curious if there's a way to achieve this within Twitter Bootstrap without resorting to using jQuery Validator. Can CSS be utilized for password comparison validation instead of relying on the form.validate() script?

Thank you

jquery css validation twitter-bootstrap

Answer 1

Answer №1

To implement form validation using CSS without relying on the jQuery validate plugin, you can follow this approach:

$('form').on('submit',function(){
   if($('#password').val() !== $('#confirm-password').val()){
       alert('Passwords do not match');
       return false;
   }
   return true;
});

Sample HTML Form

<form class="form-validate">
    <input type="email" class="input-block-level" placeholder="Email Address" required>
    <input id="password" type="password" class="input-block-level" placeholder="Password" required>
    <input id="confirm-password" type="password" class="input-block-level" placeholder="Confirm Password" required>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

Answer 2

To implement form validation using CSS without relying on the jQuery validate plugin, you can follow this approach:

$('form').on('submit',function(){
   if($('#password').val() !== $('#confirm-password').val()){
       alert('Passwords do not match');
       return false;
   }
   return true;
});

Sample HTML Form

<form class="form-validate">
    <input type="email" class="input-block-level" placeholder="Email Address" required>
    <input id="password" type="password" class="input-block-level" placeholder="Password" required>
    <input id="confirm-password" type="password" class="input-block-level" placeholder="Confirm Password" required>
    <button class="btn btn-primary" type="submit">Submit</button>
</form>

Answer 3

Answer №2

Using HTML:

<input type="password" class="input-block-level" placeholder="Password" required="" id="psd">
<input type="password" class="input-block-level" placeholder="ConfirmPassword" required="" id="confirmPsd">

An id has been included for easier identification.

With JS:

$('button').on ('click', function () {
if ($('#confirmPsd').val() === $('#psd').val()) {
  alert("Passwords match");
  return true;
}
else {
  alert("Passwords do not match");
 return false;
}
})

Answer 4

Using HTML:

<input type="password" class="input-block-level" placeholder="Password" required="" id="psd">
<input type="password" class="input-block-level" placeholder="ConfirmPassword" required="" id="confirmPsd">

An id has been included for easier identification.

With JS:

$('button').on ('click', function () {
if ($('#confirmPsd').val() === $('#psd').val()) {
  alert("Passwords match");
  return true;
}
else {
  alert("Passwords do not match");
 return false;
}
})

Comparing passwords in Twitter Bootstrap for validation purposes

Answer №1

Answer №2

Similar questions

How to Fix the Issue of CSS Font Face Path Not Working in Your Express Application

Tooltips in Bootstrap are not functional when used on pages other than the initial one in datatables

Issues with Cordova and JQuery ajax functionality not operating as expected

The dropdown list in angularjs is failing to populate with options

Trouble activating jQuery functions alongside Stripe Elements

Using $window.print() in angularjs results in the print preview displaying an empty page

Keep the entire table in place as the user scrolls

Is there a way to delete added information using a trigger that has been inserted through ajax?

Verifying whether the field's value is null or empty

Regular expression in asp.net to prevent blank spaces is important to maintain data integrity

Arranging Content with Bootstrap Columns

What is the reason for nesting divs within each other?

The route you are trying to access is currently unavailable

Animation using CSS keyframes for simultaneous manipulation of various properties

Using ASP, JQuery, and Ajax to validate a list by comparing queries in a SQL process has been

Patiently anticipating the completion of a jQuery animation

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

Tips for positioning the footer in HTML and CSS

Connect a button to a function in the controller and transmit data from the view to the controller in the Model-View-

Arranging arrays in a MySQL gallery using PHP for optimal sorting