JQuery validation: required( dependency-expression ) - jquery-plugins

I want a field to become required only when a specific option is selected or a specific radio button is selected or when a specific string is entered in a text input field (All of the required( dependency-expression ) examples I can find assume that the dependency is whether an input is checked / unchecked or filled/unfilled in the case of text fields)
Here is an example of what I need, based on a radio section:
Marital Status (the required field):
<input name="status" id='status'type="radio" value="couple" checked="checked" />
<input name="status" id='status'type="radio" value="single male" />
<input name="status" id='status'type="radio" value="single female" />
Partners Name (the dependent field - required only when 'Couple' is selected from above)
<input name="partner" type="text" id="partner">
Example 2: Required field = Venue
<select name="venue" id="venue">
<option value="">Please select venue</option>
<option>London EC1</option>
<option>London E9</option>
<option>Birmingham</option>
etc.
Dependent field = user (only required for one of the above selections, say 'Birmingham')
<input name="user" type="text" id="user">
How do I adapt the example shown athttp://docs.jquery.com/Plugins/Validation/Methods/required#dependency-expression for the above situations?
$("#myform").validate({
rules: {
details: {
required: "#other:checked"
}
}, debug:true
});
$("#other").click(function() {
$("#details").valid();
});
I have tried:
user: {
required: "#venue:('birmingham')"
}
and
partner: {
required: "#status:('couple')"
}
but these have the effect of making user and partner required regardless of results in venue and status

For the first one, your radio inputs should have different id's:
<input name="status" id='statusCouple' type="radio" value="couple" checked="checked" />
<input name="status" id='statusSingleMale' type="radio" value="single male" />
<input name="status" id='statusSignleFemale' type="radio" value="single female" />
Then your rule can look like this:
partner: {
required: "#statusCouple:checked"
}
For the second one, just make your rule like this:
user: {
required: function(element) { return $("#venue").val() == 'Birmingham'; }
}
Should do the trick.

Related

How to enable or disable a field in grocery

I'm developing a form and need to enable or disable a field depending on the answer given.
Attached screen. When choosing whether to enable the field below, NO disables it.
Thanks for the reply.
You can try this (using jquery hide and show):
You have to include jquery first in you file to make it work;
HTML:
<script src="jquery-2.1.4.js" type="text/javascript"></script>
<input type="radio" class="radiobutton" name="select" value="yes" /> yes
<input type="radio" class="radiobutton" name="select" value="no" />no
<input type="text" name="name" id="name" value="" />
Working example https://jsfiddle.net/prohit0/zfjsmn59/22/
SCRIPT:
<script>
$(document).ready(function(e) {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="yes"){
//id is the id of the elemnt to hide
$('input[id="name"]').show();
}else {
$('input[id="name"]').hide();
}
});
});
</script>
http://www.tutorialrepublic.com/faq/show-hide-divs-based-on-radio-button-selection-in-jquery.php

Override generated checkbox-name (via asp-for)

I want to change the name of a view-inputfield that is generated by an "asp-for" tag. This works when I add a "name=newname" with input fields of type 'text' or 'number'. But not when the inputfield is of type 'checkbox'. Then the "name=newname" is ignored. Any ideas why this is and how to solve it when using asp-for? I'm using AspNetCore.Mvc 1.0.0-rc2-final.
<input type="number" asp-for="#item.StatementSeqNr" name="StatementSeqNr" class="form-control" /> produces correct name:
<input name="StatementSeqNr" class="form-control" type="number" data-val="true" id="item_StatementSeqNr" value="5" />
<input type="checkbox" asp-for="#item.StatementActive" name="StatementActive" /> produces incorrect name:
<input checked="checked" data-val="true" id="item_StatementActive" name="item.StatementActive" type="checkbox" value="true" />
This is currently not possible with the new TagHelpers.
You can achieve this by using the HtmlHelpers instead of the TagHelpers. They are still fully supported in asp.net core:
#Html.EditorFor(item => item.StatementActive, null, "StatementActive")

passing value of check box using ajax with name attribute as key and not id as key

i want to know how can we pass check box value using ajax as by using name attribute but not id attribute for example
<input type="checkbox" id="s1" value="1" checked>S1
<input type="checkbox" id="s2" value="2" checked>S2<br>
<input type="checkbox" id="s3" value="3" checked>S3
<input type="checkbox" id="s4" value="4" checked>S4</td>
if i pass this checkbox value using id as attribute like below,
.ajax({
type: 'POST',
url: 'getData',
data: {
fromDate: $('#fromDate').val(),
toDate: $('#toDate').val(),
location: $('#location').val(),
section: $('#section').val(),
s1: $('#s1').is(":checked"),
s2: $('#s2').is(":checked"),
s3: $('#s3').is(":checked"),
s4: $('#s4').is(":checked"),
},
then in controller i am getting these values using seperate request.getparameters("key");
but what i want to give checkbox like below
input type="checkbox" name="s" value="1" checked>S1
<input type="checkbox" name="s" value="2" checked>S2<br>
<input type="checkbox" name="s" value="3" checked>S3
<input type="checkbox" name="s" value="4" checked>S4</td>
from this using ajax i want to do like below as
.ajax({
type: 'POST',
url: 'getData',
data: {
fromDate: $('#fromDate').val(),
toDate: $('#toDate').val(),
location: $('#location').val(),
section: $('#section').val(),
s: $('#s').val()
},
and in controller i want to get it using request.getParameterValues("s"); and this will return string[].
can u plz help me to get this , actually i was getting this in normal Action/submit in servlet but in ajax i am getting null values only..
try something like s: $('input[name="s"]:checked').val()

Ajax POST - get a checkbox value for validation

I'd like to validate a form with ajax where there is a checkbox field.
I tried in this way but I can't get the value of checkbox field.
MY FORM
<form class="Form" action="?">
<input type="text" name="type" id="type" />
<input type="text" name="action" id="action" />
<input type="checkbox" name="chk" id="chk" value="1">
<input type="submit" value="INSERT" />
</form>
MY AJAX
$(".Form").submit(function( event ) {
event.preventDefault();
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").val()
},
function(data){
$("#msg").html(data);
}
});
CONTROL.PHP
// CHECKBOX VALUE
if($_POST["chk"] == 1){
echo "THE VALUE IS 1";
exit;
}
How I could Do this? Thanks
EDIT
I tried pass to control page the chk with no success
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").prop('checked')
},
and
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
$("#chk").prop('checked')
},
How can I define the name of my checkbox field in ajax post? thanks
This returns true if the checkbox is checked:
$("#chk").prop('checked')
And in PHP check it like this:
if(isset($_POST["chk"])) // true
For check boxes, php passing value if only check box selected. so you can check is that check box received to PHP page. if its received user has selected it or if user not selected, no check box name passing to PHP page.
so you can check
if(isset($_POST["chk"]))
...
if this returns true, that means user selected check box and if not user not selected...
One solution is you send a zero value with the same name in a hidden input
<input type="hidden" name="chk" value="0">
<input type="checkbox" name="chk" id="chk" value="1">
and if chk is checked the hidden input chk will be overriden in the $_POST

how to post form with yui3

When i use yui3`s io-form module to post a form, i found the field value that server reseived is null...
Any help is welcome.
<form name='testajax' id="testajax1" >
<input type="text" name="test1" id="test1" ></input>
<input type="text" name="test2" >
<input type="text" name="test3" id="result" >
<input type="submit" value="submit" id="submit">
</form>
Y.io('/ajax/test',{
method:'POST',
form: {
id:Y.one('#testajax1'),
useDisabled: true,
},
on:{
complete:function(id,response){
Y.log(Y.one('#test1').get('value'));
},
start:function(id,response){
Y.log(Y.one('#test1').value);
}
}
});
You are passing a Y.Node to form.id and the docs indicate that it takes either a string or a "formObject" which I'm assuming means a "form element". I don't believe a Y.Node is a valid (which is an unfortunate API choice if true). Try switching your code to:
form: {
id: "#testajax1"
}
http://yuilibrary.com/yui/docs/io/#serializing-html-form-as-data

Resources