So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>
Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.
Related
I'm trying to change what text areas are visible depending on what radio button is checked.
I have followed various guides on google and none have worked.
This is what I currently have, using the click function but still nothing.
HTML:
<div class="row col-md-12">
<!-- Header Delimitation input settings -->
<div class="form-group col-md-4">
<label class="control-label" for="header_delimitation">Header delimitation</label>
<div class="col-md-12">
<div class="radio">
<label for="header_delimitation-0">
<input type="radio" name="header_delimitation" id="header_delimitation-0" value="0">
Fixed Column Width</label>
</div>
<div class="radio">
<label for="header_delimitation-1">
<input type="radio" name="header_delimitation" id="header_delimitation-1" value="1">
Character delimiter
</label>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_col_form">
<label class="control-label" for="header_columns_num">Number of Columns</label>
<div class="">
<input id="header_columns_num" name="header_columns_num" type="text" placeholder="number" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group" id="header_delim_form">
<label class=" control-label" for="header_delim">Header delimiter</label>
<div class="">
<input id="header_delim" name="header_delim" type="text" placeholder="delimiter" class="form-control input-md">
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('#header_col_form').hide('fast');
$('#header_delim_form').hide('fast');
$('#header_delimitation-0').click(function () {
$('#header_col_form').show('fast');
$('#header_delim_form').hide('fast');
});
$('#header_delimitation-1').click(function () {
$('#header_delim_form').show('fast');
$('#header_col_form').hide('fast');
});
});
How it looks like now
So functionality wise, it should when header_delimitation_0 is selected, show header_col_form and hide header_delim_form. I will then add the reverse for when header_delimitation_1 is selected.
There is most likely a far simpler and cleaner way of completing this task, if so, any help would be greatly appreciated.
I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!
Ok, I've been having a really weird problem using a checkbox which collapses a hidden div using bootstrap.
if I have data-toggle="collapse" in the checkbox input attribute section, the Div Collapses but requires that every single one of the inputs inside it be filled out.
If data-toggle="collapse" is not there, the hidden div doesn't collapse, and if the checkbox is checked it requires the inputs to be entered and if it's left unchecked I can submit the form without the inputs being entered. (desired action, but the div doesn't hide or show when the checkbox is checked)
How do I hide/show the div when the checkbox is unchecked/checked AND only require the inputs if the box is checked?
I'm using this as the HTML:
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
and the javascript:
function ChangeShip() {
if (!(document.getElementById('chShipAdd').checked)) {
document.getElementById('shipadddiv').style.visibility="hidden";
$(".shipClass").prop("disabled",true);
}
else {
document.getElementById('shipadddiv').style.visibility="visible";
$(".shipClass").prop("disabled",false);
}
}
Any solution that WORKS will be acceptable. I've bashed my brain all day trying to do this simple action. I've tried .prop .attribute .setAttribute .removeAttribute, and much much more.
Any Advice?
You can use jquery to solve this quickly. You can wrap your inputs for change ship and give it and id. And let jquery do the rest.
var form = $('#myForm'),
checkbox = $('#changeShip'),
chShipBlock = $('#changeShipInputs');
chShipBlock.hide();
checkbox.on('click', function() {
if($(this).is(':checked')) {
chShipBlock.show();
chShipBlock.find('input').attr('required', true);
} else {
chShipBlock.hide();
chShipBlock.find('input').attr('required', false);
}
});
See this jsfiddle for your problem. This should help you.
your click event will toggle the display and the disabled, but when the form is loaded you will have hidden content that is not disabled.
simply call the function on document.ready
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").prop("disabled", !show);
}
$(ChangeShip); // call on document.ready
or simply add the disabled attribute to those elements so that the initial form state is valid
If the [required] attribute is still triggered on a [disabled] element you could juggle the attribute value
function ChangeShip() {
var show = $('#chShipAdd').prop('checked');
$('#shipadddiv').toggle(show);
$("#shipadddiv .shipClass").each(function(){
if (!('_required' in this))
this._required = this.required;
this.disabled = !show;
this.required = (show) ? this._required : false;
});
}
Try to do this :
HTML :
<div class="col-md-1">
<input type="checkbox" onclick="ChangeShip()" href="#moreabout" data-toggle="collapse" aria-expanded="false" aria-controls="moreabout" class="form-control" id="chShipAdd" name="chShipAdd" value="no">
</div>
<label for="chShipAdd" class="col-md-3 control-label">Shipping Information?</label>
<div id="shipadddiv" style="visibility: hidden;">
<div class="collapse" id="moreabout" >
<div class="form-group">
<div class="col-md-12">
<br>
<input id="sStreet" name="sStreet" type="text" placeholder="Street Name (required)" class="form-control shipClass" required>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input id="sCity" name="sCity" type="text" placeholder="City (required)" required class="form-control shipClass">
</div>
<div class="col-md-4">
<input id="sState" name="sState" type="text" placeholder="State (required)" required class="form-control shipClass">
</div>
<div class="hidden-lg hidden-md"> </div>
<div class="col-md-4">
<input id="sZipcode" name="sZipcode" type="text" placeholder="Zip (required)" required class="form-control shipClass">
</div>
</div>
</div>
</div>
JQUERY :
$('#chShipAdd').change(function() {
if ($('#chShipAdd').prop('checked')) {
$('#shipadddiv').show();
} else {
$('#shipadddiv').hide();
}
});
I am trying to clear all the errors and make input values blank on closing of magnific popup.
I inspected the class of 'close' button and tried to fire jquery event but it is not working.
$("button.mfp-close").on('click',function(){
console.log("Closed");
});
When i click on mfp-close then there is no log in console.
HTML snippet is:
<div class="mfp-content"><div id="customdesign" class="white-popup mfp-with-anim">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p><span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p><form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst"
placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp- close">×</button>
</div></div>
How can we handle this operation??
First of all, if you are using bootstrap framework, use bootstrap modal instead magnific popup, no need for extra js librabry, you can achieve same with bootstrap modal
in your HTML, button you have class="mfp- close" it should be class="mfp-close" as you are binding it like this $("button.mfp-close")
To reset form on pop-up close, you can achieve it with $('form')[0].reset();
Script
$("button.mfp-close").on('click',function(){
alert("Closed");
$('form')[0].reset();
});
HTML
<a class="popup-modal" href="#customdesign">Open modal</a>
<div class="mfp-content">
<div id="customdesign" class="white-popup-block mfp-hide">
<div class="row">
<div class="col-sm-12 text-center">
<h3>Upload Your Design</h3>
<p>
<span class="success_sbmt" style="display:none;color:green">Congratulations! We have sent you the coupon code on your registered email id</span>
</p>
<form novalidate="novalidate" class="form cmxform" id="customForm">
<input name="leave" value="http://" type="hidden">
<input name="isblank" value="" type="hidden">
<div class="form-group">
<label class="sr-only">Name</label>
<input aria-required="true" class="form-control" name="nam_cst" id="nam_cst" placeholder="Enter Name.." required="" type="text">
<span class="help-block" style="color:red"></span>
</div>
</form>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
</div>
Working fiddle example
I am using parsley.js to validate my form. When trying to validate my checkbox by using data-mincheck, noting happens.
here is my code snippet:
<form data-validate="parsley">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" data-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
</form>
On the Parsley.js Website it says, he only uses the parsley-namespace for his values. I evaluated this quickly with the current version of Parsley.js.
Its seems that it doesnt work anymore with data- attributes, however this is what i got out of you code to get it working:
<form action="success.html" parsley-validate method="post">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" parsley-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
<input type="submit" value="Senden"> </input>
</form>
Make sure you add Jquery before Parsley. I simply added the now recommendet Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field.
The "parsley-group" always has to be the same for each Checkbox to be affected. But isnt limited to the "name" attribute.
Hope this helps.