jQuery validation - check if two passwords are equal - javascript

I am having some problems here, I have simple bootstrap form for change password integrated to my design and I want to validate it with jQuery.
What I want is simple, check if both passwords are same, and if not, display some error message.
My HTML looks like:
<div class="container">
<div class="row vertical-center">
<br>
<div class="col-md-6 col-md-offset-3">
<br>
<form role="form" action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
</div>
</div>
</div>
And I am trying to add something like:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
Same script work perfect for me on my other code, so it looks i am blind or I don't know where I making a mistake!
Guys can somebody of you without watching to my code for days look at this and tell me what I am doing wrong?
THANKS!!


This worked for me:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="password" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="password_again" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
</body>
</html>

Related

page redirect after success bootstrap validation without using php

Team,
I am trying to redirect after success form validation. If it is not success it has to be there in same page if it is success it has to redirect other page
I have added below line after was class validated code
$(location).attr('href', 'data.html');
it is redirecting to next page but I am not seeing any error message I am missing some valdiation.
Here is my entire code.
$(function () {
'use strict'
$('#data_input').on('submit', function (event) {
if (!event.target.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
$(location).attr('href', 'data.html');
return true;
});
$("#resetbtn").on("click", function (event) {
event.preventDefault();
$('#data_input')
.trigger("reset")
.removeClass('was-validated')
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form class="requires-validation" id="data_input" method="post" novalidate>
<div class="form-group row">
<div class="col">
<label> Name</label> <input type="text" class="form-control" name="projectName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col">
<label>Code</label> <input type="text" class="form-control" name="projectCode" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<label>Number</label> <input class="form-control" type="text" name="sprintNumber" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col"> <label>Start Date:</label> <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col"> <label>End Date:</label> <input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<!--<div class="form-group row">
<div class="col">
<label>Total Days</label> <input type="text" class="form-control has-feedback-left"
name="numberdays" id="numberdays" disabled>
</div>
</div>-->
<br />
<button id="submit" type="submit" class="btn btn-primary">Next</button>
<button id="resetbtn" type="button" class="btn btn-secondary">Clear</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
Please let me know what I am doing wrong here

in your event submit. You use a validation if statement (checkvalidity).
$('#data_input').on('submit', function (event) {
**if (!event.target.checkValidity()) {**
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
**$(location).attr('href', 'data.html');**
return true; ...
but whether it is valid or not you still perform the location redirect afterwards.
the redirect should be placed in a if instead you will always be redirected before any validation.

Jquery Valid() function only apply on 1st element

I am intend to use javascript to submit the form. Before I want to submit the form, I need to validate my form.
The following is my code :
alert("OP Please edit me to add the validation script code, cdn link or something. Add code that triggers the validation.");
function validateForm1() {
$("#addMapForm").validate();
$('#addMapForm').valid();
console.log($('#addMapForm').valid());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" required/>
</div>
</div>
</div>
</form>

You are missing names on the inputs. A form will only submit named controls and validation plugin won't validate anything without a name
The required fields work fine once you add them
$("#addMapForm").validate();
$("#addMapForm").valid();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input name="location" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input name="unit" class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea name="address" class="form-control" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input name="city" class="form-control" required />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input name="zip" class="form-control" required/>
</div>
</div>
</div>
<button>Submit</button>
</form>

I assume you are using this: https://jqueryvalidation.org/validate/
Have you implemented the rules of validation for other elements?
rules (default: rules are read from markup (classes, attributes, data))
So either you have those defined in HTML or you need to define them inside validate function called before you called .valid().
Here is an examle:
$("#myform").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
In short for more precise help we need all the relevant code or fiddle, plunker a demo showing the example of the problem you are facing.

Try this solution.
$('.form-control').each(function() {
$(this).validate();
$(this).valid();
}

I tried to use the following js to validate all my form, however i know the following code is not the best answer, it only able to show the error message on the first input element.
I am welcome to anyone to post better answer than this.
function validateForm() {
var result = true;
$("#addMapForm").each(function () {
$(this).find(':input').each(function () {
if ($(this).valid() == false) {
result = false;
return;
}
});
});
return result;
}

I gave your form inputs some name attributes. Not sure if you added the actual code to your page, so I did so here. I added a button to trigger just for a demo. I added the simplest bit of CSS.
$("#validateme").on('click', function() {
console.log("validating");
let Validator = $("#addMapForm").validate();
Validator.form();
console.log(Validator.valid());
});
.error { color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<form enctype="multipart/form-data" action="/Admin/AddMap" method="post" id="addMapForm">
<div>
<br />
<br />
<div class="col-md-12">
<div class="form-group">
<label>Location Name *</label>
<input class="form-control" name="location" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Unit/ Floor Number</label>
<input class="form-control" />
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Address*</label>
<textarea class="form-control" name="address" style="height:100px" required></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Town/ City *</label>
<input class="form-control" required type="text"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Zip Code*</label>
<input class="form-control" name="zip" required />
</div>
</div>
</div>
<button id="validateme" type="button">Do validate</button>
</form>

Download file offline using JQuery/JavaScript

I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?

1000hz bootstrap validator data-toggle="validator" not working

I am trying to use the following validator http://1000hz.github.io/bootstrap-validator/ to validate a below form I copied most of the elements from the documentation of the validator plugin and when I press the submit button it always passes with out error.I added "data-toggle="validator" and it says it should automatically validateit.and i also tried to use the script at the bottom. can some one please show me a sample how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<h1>Register Below! </h1>
<form data-toggle="validator" role="form" method="post" class="form-horizontal" name="myForm">
<div class="form-group">
<label for="inputName" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputName" name="name" placeholder="Username" required />
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-md-3 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" data-error="Incorrect email address" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" name="password" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-md-3 control-label">Confirm Password</label>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="The password doesnt match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
<script >
(document).ready(function() {
$('#myForm').validator()
$('#myForm').submit(function (e) {
$('#myForm').validator('validate')
});
});
</script>
</body>
</html>

Couple of mistakes in your approach
No jQuery lib included (must be included above all other JS libraries)
bootstrap.min.js included twice (remove one)
missing $ before (document).ready(function() in script
missing id selector myForm in <form>
Rest nothing is wrong with the code
SideNote: validation can be done either with attribute data-toggle="validator" OR initialize on form via JS script $('#myForm').validator(), no need of both.
Fiddle with data-toggle="validator"
Fiddle with JS Script

Form Validation in AngularJS on submit is not working

I am trying to validate a form and display the validation result just under the text fields on submission of form as below.
But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.
My codes for this is:
formSumbit.html
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
console.log("hi");
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" ng-submit="signupForm()" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required && signup_form.submitted">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
But i am able to do the validation in on Blur event. see the code below which is working on onBlur.
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

Try this:
Example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

Try to set the controller on the container div
<div ng-controller="signupController">
Check this example
http://codepen.io/sevilayha/pen/xFcdI

Categories

Resources