This question already has answers here:
validating multiple textbox having same name with jquery validator validates only first input
(4 answers)
.valid() only validates first input with jQuery Validation plugin
(1 answer)
Closed 4 years ago.
I've been struggling all day with a JQuery validate issue. Where it only validates the first field.
I've managed to reproduce it here:
$(document).ready(function() {
$('#go').click(function() {
console.log('go clicked');
if ($('#detailsForm').valid()) {
alert('if you see this then the form is valid.');
}
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="jquery-validate#1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script data-require="jquery-validate#1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>This doesn't work :(</h1>
<form id="detailsForm">
<div class="row guttered-bottom">
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
First Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
Last Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<button id="go">CLICK ME! </button>
</body>
</html>
Steps to reproduce: click the button and observe that the validation message comes up for the first field (first name). Enter a first name and click the button again. Notice that the form seems to validate even though both fields are required.
What am I doing wrong?
jQuery Validate needs each input to have a name attribute. Without this, it can't properly create the input objects it uses to store validation results.
Just add a unique name to each input and you should be good:
<input name="ReserveFirstName" id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
<input name="ReserveLastName" id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
Related
This question already has answers here:
Bootstraps ICheck-Helper does not trigger on changed event
(4 answers)
Closed 3 years ago.
I am trying to show hidden div based on radio button input.
When it is checked yes then it should show the hidden div and when checked no, it should hide the div.
I don't know why it is not working. I have checked with some other references on stack, but it didn't help.
$(function() {
$("input[name='otherppt']").click(function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").prop("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").prop("required", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio-group">
<input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
<input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
<div class="form-group row" id="otherdoi" style="display:none">
<div class="col-mobi-12 col-xs-6">
<label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
</div>
<div class="col-mobi-12 col-xs-6 col-md-5">
<div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
<span class="form-date-field">
<input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
</span>
<i class="clear"> </i>
</div>
</div>
</div>
$(document).on('change','.other_ppt', function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").attr("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").attr("required", false);
}
});
I just checked your code working fine may be it is CDN link breakage. Try again
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="radio-group">
<input type="radio" id="otheryes" name="otherppt" class="other_ppt" required value='yes' data-msg='Please select any one of these.' />
<input type="radio" id="otherno" name="otherppt" class="other_ppt" required value='no' data-msg="Please choose any one of these." />
</div>
<div class="form-group row" id="otherdoi" style="display:none">
<div class="col-mobi-12 col-xs-6">
<label class=""><b>Date of Issue <span>(Day-Month-Year)</span> <span class="txt-red">*</span></b></label>
</div>
<div class="col-mobi-12 col-xs-6 col-md-5">
<div class="input-append default date dob-dates" data-date="19-03-2019" data-date-format="M dd, yyyy">
<span class="form-date-field">
<input type="text" name="date_of_issue" class="required date-of-issue" autocomplete=off readonly data-msg='Please enter date of issue.' placeholder="DD-MM-YYYY" />
</span>
<i class="clear"> </i>
</div>
</div>
</div>
<script>
$(function() {
$("input[name='otherppt']").click(function() {
if ($("#otheryes").is(":checked")) {
$("#otherdoi").show();
$("#otherdoi input").prop("required", true);
} else {
$("#otherdoi").hide();
$("#otherdoi input").prop("required", false);
}
});
});
</script>
</body>
</html>
Make sure you don't have other input[name='otherppt'] in your code. Maybe on different files (widgets/popups)
I am working on application where I've one form and It should show validation error message for input fields on wrong input.
My form will look like this -
It should show error message if -
Input field modified with wrong input
Submit button clicked without modification in required input field.
It should show error message as below -
To achieve this I am using ng-message directive. It wil help me to show error message on $dirty of input field. But for Submit button I could not find correct way. Currently I am using a flag which will be modified on submit click. But I am interested in some better approach. Is there predefined method available to achieve this ?
Here is the complete example which I tried, and here is plunkr for the same.
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function() {
$scope.submitted = true;
if (myForm.$valid) {
alert('Form submitted with passed validation');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<label>
Enter your phone number:
<input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Thanks!
You can use $submitted for the form,
Syntax: formname.$submitted
$submitted : True if user has submitted the form even if its invalid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function() {
if (myForm.$valid) {
alert('Form submitted with passed validation');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<div ng-if="myForm.$submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<label>
Enter your phone number:
<input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
</label>
<div ng-if="myForm.$submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Please run this snippet and check.
Here is the reference
The changed plunker link of yours
Update Plunker Link
You could go with disabling submit button till your form isn't correct one
This question already has answers here:
Display A Popup Only Once Per User
(7 answers)
Closed 6 years ago.
There have already been answers to this question but I am still unsure exactly how it works.
Here is my code:
Here is my JavaScript:
<!--PopupScript-->
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
Here is the HTML:
<!--Popup Content-->
<div class="container-fluid">
<div id="overlay-back"></div>
<div id="popup">
<img src="Assets/images/Deep_Close.png" class="close-image" />
<form name="Mail_list" action="save.php" method="post">
<h4>Subscription</h4>
<br/>
<div class="form-group">
<label for="first_name">First Name: </label>
<input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required />
</div>
<div class="form-group">
<label for="last_name">Last Name: </label>
<input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required />
</div>
<div class="form-group">
<label for="email">User Email: </label>
<input type="text" name="email" id="email" size="25" placeholder="Email" required />
</div>
<br/><br/>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
</div>
</div>
This solution works great for what I need it for. The problem is that I do not want the popup to show every time someone navigates to the home page, I want the popup to show only once per user or session. I know this can be achieved by using 'cookies', but I do not know exactly how to incorporate it into the JavaScript above.
Any help would be greatly appreciated. Thank you.
You can use localStorage.
Example:
$('#overlay-back').fadeIn(500,function(){
if (localStorage.popupShown !== "true") {
$('#popup').show();
localStorage.popupShown = "true";
}
});
you can try
$(document).ready(function(){
if (sessionStorage.count==0) {
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
sessionStorage.count = 1;
});
}
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
I am trying to use parsley.js validation using simple form but is not working. My cdn is working correctly but I am not getting any validation. The code is:
<!doctype html>
<html>
<head>
<title>Parsley.js form validation</title>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.6/parsley.min.js"></script>
<link rel="stylesheet"type="text/css"href="css/bootstrap.min.css">
<script>
$('.parsley-validate').parsley();
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6 offset3">
<h2>Parsley.JS</h2>
<form role="form" class="parsley-validate" data-validate="parsley">
<label>Name</label>
<input type="text" class="form-control" name="name" data-parsley-required="true"><br/>
<label>Email</label>
<input type="text" class="form-control" name="name" data-parsley-required="true" data-parsley-type="email" data-parsley-trigger="change" /><br/>
<label>Website</label>
<input type="text" name="name" class="form-control" data-parsley-required="true" data-parsley-type="url" data-parsley-trigger="change" /><br/>
<input type="button" value="submit" class="btn btn-success"/>
</form>
</div>
</div>
</div>
</body>
</html>
You are calling $('.parsley-validate').parsley(); in the <head> before the form exists. Move the script to the end of the <body> or wrap it in a document ready:
<script>
$(function(){
$('.parsley-validate').parsley();
})
</script>
I don't believe you need to use the data tags to validate if you are calling $('.parsley-validate').parsley();. Look at the warning under this section on the docs: Parsley.js Javascript Installation
EDIT: I should have been more specific, you don't need data-validate='parsley on the form when also using $('.parsley-validate').parsley(). That is what the above link points out. Of course, you can still use data tags on elements to define validations.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.