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.
Related
I am having difficulty figuring out the following error:
Uncaught TypeError: Cannot read property 'split' of undefined
The HTML:
<div id="content" class="col-xs-12 col-sm-12">
<p>Please select your preferred payment method.</p>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="authorizenet" checked="checked">
Credit Card/Debit Card (Authorize.Net) </label>
</div>
<div class="radio">
<label>
<input type="radio" name="payment_method" value="affirm">
Credit Card/Debit Card (Affirm) </label>
</div>
<p><strong>Add comments about your order.</strong></p>
<p>
<textarea name="comment" rows="8" class="form-control"></textarea>
</p>
<div class="cart-module">
<div class="cart-content">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-coupon">Coupon Code</h4>
<div class="input-group">
<input type="text" name="coupon" value="" placeholder="Coupon Code" id="input-coupon" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="coupon" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<h4 for="input-voucher">Gift Certificate Code</h4>
<div class="input-group">
<input type="text" name="voucher" value="" placeholder="Gift Certificate Code" id="input-voucher" class="form-control">
<span class="input-group-btn">
<input type="button" value="Apply" data-code="voucher" data-loading-text="Loading..." class="btn btn-primary">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="pull-right">I have read and agree to the <b>Shipping and Returns</b>. <input type="checkbox" name="agree" value="1">
<input type="button" value="Continue" id="button-payment-method" data-loading-text="Loading..." class="btn btn-primary">
</div>
</div>
The Script:
var newtext = "affirm";
selector = $("input[type=radio][value=affirm]").closest("label");
var line = selector.html().split(">")[0] + ">" + newtext;
selector.html(line);
The Goal:
I have two radio buttons on the checkout page.
Credit Card/Debit Card (Authorize.Net)
Credit Card/Debit Card (Affirm)
I am unable to edit the HTML directly. Thus rebuilding the html line with the above code to give me the output I want. I am trying to change the HTML text of the 2nd radio input to just "Affirm".
The script works in a fiddle, but not on the page.
I once encountered a similar bug when trying to maintain a page without access to the source files. I was using jQuery to attempt to delete a p element sentence but was coming up undefined because it was running on the homepage before the application even got to generate that part of the html. It was an SPA. I fixed it by adding a listener on the document to the router something along like this: $(document).on("pageshow", "#checkoutPage", function() {//your jquery function});
I tried it both on CodePen and locally with VS Code and both time I got the intended effect. Have you tried maybe making sure youre using the right version of JQuery and that is linked to the html in the proper oder, also debugging via console logs? See below:
CodePen
enter code here
I have an html form using express-handlebars inside a loop that gets rendered a certain amount of times based off how many users there are assigned to a group.
So if there are 5 users the below code between the "#Each" gets loaded 5 times.
How do I structure this so that I can Post it back to node and write it to mongoDB in terms of what I use for the id and name.
I couldn't find anything related, if there's anything on here, please link it :)
<form action="/users/rsvp" method="POST">
{{#each docs}}
<div class="card border-secondary mb-3">
<div class="card-header"></div>
<div class="card-body">
<h4 class="card-title">{{this.name}}</h4>
<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="{{this._id}}"
name="{{this._id}}">
<label class="form-check-label" for="{{this.id}}">
Attenting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="0" id="{{this._id}}"
name="{{this._id}}">
<label class="form-check-label" for="{{this._id}}">
Not Attenting
</label>
</div>
<div class="form-group">
<label for="DietaryRequirements"></label>
<input type="text" id="DietaryRequirements" name="DietaryRequirements" class="form-control"
placeholder="Dietary Requirements" />
</div>
</div>
</div>
{{/each}}
<button type="submit" class="btn btn-primary btn-block">
RSVP
</button>
</form>
With your code, all the users' form are rendered within 1 <form>, which will cause a lot of duplicate fields on DietaryRequirements and of course the server cannot figure out which field is for which user. You can simply break it up so that each user has a separate , and pass the user's ID through a hidden input. E.g.:
{{#each docs}}
<form action="/users/rsvp" method="POST">
<!-- Your Form Content, name=attending and name=dietaryRequirements -->
<input type="hidden" value="{{this._id}}">
<button type="submit" class="btn btn-primary btn-block">
RSVP
</button>
</form>
{{/each}}
OR
If you really want a single form for the whole group of user, you can utilize the extended setting on body parser, which allows submission of nested object through HTML, in that case you write something similar to:
<form action="/users/rsvp" method="POST">
{{#each docs}}
<div class="card border-secondary mb-3">
<div class="card-header"></div>
<div class="card-body">
<h4 class="card-title">{{this.name}}</h4>
<div class="form-check">
<input class="form-check-input" type="radio" value="1" id="user-{{this._id}}-attending"
name="user[{{this._id}}][attending]">
<label class="form-check-label" for="user-{{this._id}}-attending">
Attenting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="0" id="user-{{this._id}}-not-attending"
name="user[{{this._id}}][attending]">
<label class="form-check-label" for="user-{{this._id}}-not-attending">
Not Attenting
</label>
</div>
<div class="form-group">
<label for="user-{{this._id}}-dietary"></label>
<input type="text" id="user-{{this._id}}-dietary" name="user[{{this._id}}][dietaryRequirements]" class="form-control"
placeholder="Dietary Requirements" />
</div>
</div>
</div>
{{/each}}
<button type="submit" class="btn btn-primary btn-block">
RSVP
</button>
</form>
Notice the name s has a notation of a[b][c], and also the id and for should have unique pairings on each page which have been fixed as well.
If you have set body parser extended to true, you should get for req.body:
{
user: {
'10': {
attending: '1',
dietaryRequirements: 'Meaty'
},
'11': {
attending: '0',
dietaryRequirements: 'N/A'
}
}
}
This question already has answers here:
Prevent form submit but retain form validation
(2 answers)
Closed 3 years ago.
I have a form using JQuery Validator. If 2 checkboxes aren't checked, I display an error and the form shouldn't submit. But I'm finding that it submits anyway, even though my code returns false. Here's a portion of my HTML code:
<form id="addressForm" name="addressForm" method="post">
<div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
<div class="checkbox-inline">
<label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
<#spring.bind "shippingAddressForm.awtTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-inline" style="margin-left:0;">
<label class="checkboxContainer">I have read and agree to the Academic Writer Terms of Service
<#spring.bind "shippingAddressForm.apaTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
</div><!-- /.alertBox -->
<div class="col-md-6 col-md-push-6">
<div class="alignRightThen100Width"><button onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment & Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
</div>
</form>
And here's the JS:
function beforeAddressPageSubmit(){
if(showBillingAddress){
removeState('Billing');
}
}
function submitAddressForm() {
var validator = jQuery("#addressForm").validate();
var isValid = validator.form() && awtTermsAgreeCheckbox();
if (isValid) {
beforeAddressPageSubmit();
jQuery("#addressForm").submit();
}
}
Is there anything I'm doing wrong?
You need add type="button" to your button tag.
function beforeAddressPageSubmit(){
if(showBillingAddress){
removeState('Billing');
}
}
function submitAddressForm() {
var validator = jQuery("#addressForm").validate();
var isValid = validator.form() && awtTermsAgreeCheckbox();
if (isValid) {
beforeAddressPageSubmit();
jQuery("#addressForm").submit();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addressForm" name="addressForm" method="post">
<div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
<div class="checkbox-inline">
<label class="checkboxContainer">I have read and agree to the <a target="newtab" href="${(www_apa_org_url)!?string}/about/termsofuse">APA Terms and Conditions</a>
<#spring.bind "shippingAddressForm.awtTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="awtTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div class="checkbox-inline" style="margin-left:0;">
<label class="checkboxContainer">I have read and agree to the Academic Writer Terms of Service
<#spring.bind "shippingAddressForm.apaTermsAccepted"/>
<input type="checkbox" name="${(spring.status.expression)!}" id="apaTermsAccepted" value="true">
<span class="checkmark"></span>
</label>
</div>
<div id="gdprerror" class="help-block hide" style="color: #900;">Please indicate that you agree to the terms and policies above by checking all two boxes.</div>
</div><!-- /.alertBox -->
<div class="col-md-6 col-md-push-6">
<div class="alignRightThen100Width"><button type="button" onclick="submitAddressForm();" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;"/>Go to Payment & Review<i class="fa fa-chevron-right" style="padding-left:6px;" aria-hidden="true"></i></button></div>
</div>
</form>
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.
Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>
Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.