Conditional validation with jquery - javascript

Ok this is driving me crazy. I have a user account page. Where you have the option to change your password. I want a conditional jquery validation that if the user types in a new password in the new password box the box that confirms the password as well as the box that asks for the old password is turned into a required element. here is my ragtag code so far:
$("#aspnetForm").validate({
rules: {
<%=CurrentPass.UniqueID %>: {
required: <%=NewPass1.UniqueID %>:specified}
<%=NewPass2.UniqueID %>: {
required: <%=NewPass1.UniqueID %>:specified}
}, messages:{}
});
Just to clear something up. I am using :specified because if the filed is filled. Maybe some other condition?

I think you want to use equalTo for the confirmation password, with the current password required if the new password has data in it.
$('form').validate({
rules: {
<%= CurrentPass.UniqueID %>: {
required: '#<%= NewPass1.ClientID %>:filled'
},
<%= NewPass2.UniqueID %>: {
equalTo: '#<%= NewPass1.ClientID %>'
}
}
});

Those selectors need to be strings using :filled (unless :specified is a custom selector you made) and found by ID instead of name, like this:
$("#aspnetForm").validate({
rules: {
<%=CurrentPass.UniqueID %>:{
required: "#<%=NewPass1.ClientID %>:filled"}
<%=NewPass2.UniqueID %>:{
required: "#<%=NewPass1.ClientID %>:filled"}
}, messages:{}
});
});

Related

JQuery validate not implementing 'required' in email field

I've a simple HTML input:
<input id="email" name="email" value="" type="email">
and validate it using JQuery validate:
$('form').validate({
rules: {
email: {
required: 'true',
email: 'true'
}
}
});
The rules are applied, I can see them in $('#email').rules(). However when I later run $('#email').valid() or $('form').valid() the input is marked as valid when empty, but invalid when an invalid email address is entered.
How do I ensure the input is invalid when empty?
Relevant JSfiddle: https://jsfiddle.net/ycypuy86/
I usually set these without quotes?
rules: {
email: {
required: true,
email: true
}
}
remove quotes on your fiddle and it works.

jQuery: Prevent Select List from turning green on select

This is probably pretty strange but I have a form page with various elements that are being checked for validation when I hit submit. Unfortunately I also have a management side of the page that performs its own Ajax actions.
One of these items has a select list that when I select an option it turns green. I don't really need/want the green validation on this select list as it isn't tied to my postback action at all.
Any ideas on how to turn it off with jQuery? (I'm currently just using $("#form").validate({ ... ...}) to validate my other fields and I think it is taking over for this element too)
Current Validation:
$(function () {
// Validation
$("#edit-opp-prod-form").validate({
// Rules for form validation
rules: {
Opportunity: {
required: true
},
CommissionAmount: {
required: true,
currency: ["", false]
}
},
// Messages for form validation
messages: {
Opportunity: {
required: "An Opportunity name is required."
},
ComissionAmount: {
required: "A Commission Amount must be set."
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});
The Select List I don't want to be validated,
<section class="col col-5">
<div>
#Html.Label("ProductID", "Products", new { #class = "label" })
#Html.Action("ProductSelectList", "Products", new { unmappedProducts = true})
</div>
</section>
This produces this when I inspect,
<select id=ProductID" name="ProductID">Products</label>
<option value="...">...</option>
...
<option value="...">...</option>
</select>

Jquery validate only partially working

So I'm using jquery validate to validate a form, and it's working for the most part, but my confirm password input isn't doing anything. It doesn't show that it's a required field, when I'm telling it to be required just like the rest of the fields, and the equalTo: method I'm using doesn't work, however I don't think the equalTo: method is the problem because the required:true doesn't work either.
Here's my JQuery
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#user").validate({
wrapper: 'div',
errorLabelContainer: "#messageBox",
debug: false,
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
confirmPassword: {
required: true,
equalTo: "#password"
},
termsOfService: "required",
},
messages: {
username: {
required: "Please enter a username",
minlength: "Must be at Least 5 characters",
},
password: {
required: "Please enter a password",
minlength: "Must be at least 5 characters"
},
confirmPassword:{
required: "Confirm Password required",
equalTo: "Passwords don't match"
},
termsOfService: "please accept our terms of service",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
and here's my jsp page form
<form:form commandName="user" method="POST">
Username: <br><form:input path="username"/><br><br>
Password: <br><form:password path="password"/><br><br>
Confirm Password: <br><input type="password" id="confirmPassword"/><br><br>
Terms of Service<form:checkbox path="termsOfService" id="termsOfService" style="vertical-align: middle; margin-left: 15px;"/><br><br>
<input type ="submit" id="submitBtn" value="Submit"/><br><br>
</form:form>
As mentioned in comment, I'm not familiar with JSP but very much familiar with jQuery validation plugin,
First your are missing id="password" to password input
<form:password path="password" id="password" />
and then path to confirm password input
<form:password path="confirmPassword" id="confirmPassword"/>
jQuery validation plugin to set the rules based on inputs name attributes or in JSP path so not able to find confirm password because of missing path and equalTo failing because you binding it with "#password" but no id="password" given in password input

A Very Basic Confirm password validation not working

Can anyone solve this fiddle. it has two fields password and confirm password. Validation needs to be done such that both password entered should be the same.
$(document).ready(function ()
{
$('#EditForm').validate({
rules: {
password: {
required: true
},
cpassword: {
required: true,
equalTo: "#password"
}
}
});
});
http://jsfiddle.net/kalai789/aCZgK/2/
Thanks in advance
Firstly the external version of jQuery you had loaded was very old (1.5.2) it appears incompatible with the current version of validate, I updated the fiddle to use 1.6.4 as that was the lowest available on jsFiddle. Secondly, the rules and other settings for the validate plugin are keyed on the name attribute of the element, not the id, so they need to be added:
<input type="password" name="password" id="password"/>
<input type="password" name="cpassword" value="" id="cpassword"/>
Working fiddle
use keyup method
http://jsfiddle.net/dbwMY/
check the info source
https://stackoverflow.com/a/9717796/1768043
Found similar question
Demo
jQuery('.validatedForm').validate({
rules : {
password : {
minlength : 5
},
password_confirm : {
minlength : 5,
equalTo : "#password"
}
}
});

Why my javascript won't post or submit to my database?

I've create a form using jQuery and I want to submit it into my SQL SERVER Database by AJAX. but It won't submit, I don't know where the problems comes. I create this site with ASP.
Here is the javascript to submit:
$("#reg_tr_new").click(function(){
$("#refresh_tr").submit();
});
$("#refresh_tr").validate({
debug: false,
rules: {
deskripsi: "required"
},
messages: {
deskripsi: {
required: 'Deskripsi harus diisi'
}
},
success: "valid",
submitHandler: function(form) {
$("#right-container").hide();
$("#add_no").show();
.post('trx_menu/queries/svTR_.asp', $("#refresh_tr").serialize(), function(data) {
$('#refresh_tr_show').html(data);
});
}
});
Here is the code in trx_menu/queries/svTR_.asp:
<%
noTrx=request.form("noTrx")
deskripsi=request.form("deskripsi")
from=request.form("from")
tos=request.form("tos")
user_input=Session("ss_ckduser")
BankTrx=request.form("BankTrx")
Dim tgl_inpt
tgl_inpt=Now
strsql="select count(*)+1 as idtrbaru from "& dbweb &".dbo.trmitrareghd"
set qdata = conn.execute(strsql)
idbaru = qdata("idtrbaru")
strsql="insert into "& dbweb &".dbo.trmitrareghd values('"& idbaru &"','"& noTrx &"','"&BankTrx&"','"& deskripsi &"','"&date()&"','"&date()&"','0','"& user_input &"','"& tgl_inpt &"')"
set qdata = conn.execute(strsql)
'response.write strsql
%>
You have the validation plugin debug option set to true which blocks form submittal while you ...debug!
You are also missing a $ before post
.post('trx_menu/queries/svTR_.asp'......
Should be:
$.post('trx_menu/queries/svTR_.asp'......
Use a browser console to check script and syntax errors as well as to inspect the request itself.

Categories