Let’s say if you have two fields in same row and one requires validation but other not when you trigger validation it shows validation error for other field too. For example, Below is my validation only on “Logged by name” but when I submit the form it throws for “Manager” field too. As soon as I enter something in “Logged by name” field it gets OK.
Here is my HTML,
<div id="Section_ObserverDetails">
<div class="col-sm-12">
<div class="row">
<div class="panel-body form-horizontal">
<div class="form-group">
<div class="col-sm-2">
<label for="pro_LoggedByName" class="col-sm-12 control-label">Logged by name</label>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="pro_LoggedByName" name="pro_LoggedByName" value="" > </div>
<div class="col-sm-2">
<label for="top_Manager" class="col-sm-12 control-label">Manager</label>
</div>
<div class="col-sm-4" id="div-top-manager">
<div class="radio">
<label class="form-radio form-normal form-text form-success "><input type="radio" name="top_Manager" value="Yes">Yes</label><label class="form-radio form-normal form-text form-success active"><input type="radio" name="top_Manager" checked="checked" value="No">No</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If I put class="form-group" tag for both the fields then problem gets resolve but "Manager" field slides down to the next row which I don't want.
Any idea ?
In your validation script code, set custom error selector e.g row: '.col-sm-4', so it will override the default error class .has-error .form-control and only target the selector which contains the required input field.
fields: {
pro_LoggedByName: {
row: '.col-sm-4', //<----This is custom error selector
validators: {
notEmpty: {
message: 'The city is required'
}
}
}
}
More Information & Reference
Fiddle
Related
I'm following an outdate django e-commerce course using django and stripe. The course is about 4 years old so a lot has changed with django and stripe, which has allowed me to do a ton of research on both. I'm at the end of the tutorial and have run into an issue while creating the checkout page and more importantly using stripe to 'Create Charge'. I am receiving the following error message:
django.utils.datastructures.MultiValueDictKeyError
django.utils.datastructures.MultiValueDictKeyError: 'stripeToken'
I read in the documentation for Creating Charge which states
token = request.POST['stripeToken'] # Using Flask
is for Flask (I think), however when i remove ['stripeToken'], I receive this error message:
stripe.error.InvalidRequestError stripe.error.InvalidRequestError:
Request req_kikB88HKbEkq9W: Could not find payment information
I need a way to pass Stripe the payment information when the form is submitted. Also, I came across this post but the publisher was receiving error message do to multiple forms
view.py
from django.conf import settings
from django.contrib.auth.decorators import login_required
from django.shortcuts import render
import stripe
stripe.api_key = settings.STRIPE_SECRET_KEY
# Create your views here.
#login_required
def checkout(request):
publish_key = settings.STRIPE_PUBLISHABLE_KEY
if request.method == 'POST':
token = request.POST['stripeToken']
stripe.Charge.create(
amount=999,
currency='usd',
description='Example charge',
source=token,
statement_descriptor='Custom descriptor',
)
context = {'publish_key': publish_key}
template = 'checkout.html'
return render(request, template, context)
checkout.html
{% extends 'base.html' %}
{% block content %}
<div class="col-sm-6 offset-md-3">
<h4 class="mb-3">Billing address</h4>
<form id="payment-form" action="" method="post">{% csrf_token %}
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" required style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" required/>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" required />
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted"></span></label>
<input type="email" class="form-control" id="email" placeholder="you#example.com" required />
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required />
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address 2 <span class="text-muted"></span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite" />
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="city">City</label>
<input type="text" class="form-control" id="city" required />
<div class="invalid-feedback">
Zip code required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">Choose...</option>
<option>California</option>
</select>
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" required />
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="same-address">
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">Save this information for next time</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">Payment</h4>
<div class="d-block my-3">
<label for="card-element">Credit or debit card</label>
<div id="card-element" class="form-control" style='height: 2.4em; padding-top: .7em;'>
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<hr class="mb-4">
<button class="btn btn-outline-success btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
</div>
{% endblock %}
app.js
// Create a Stripe client.
const stripe = Stripe('{{ publish_key }}');
// Create an instance of Elements.
const elements = stripe.elements();
// Create an instance of the card Element.
const card = elements.create('card', {});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', ({error}) => {
const displayError = document.getElementById('card-errors');
if (error) {
displayError.textContent = error.message;
} else {
displayError.textContent = '';
}
});
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {token, error} = await stripe.createToken(card);
if (error) {
// Inform the customer that there was an error.
const errorElement = document.getElementById('card-errors');
errorElement.textContent = error.message;
} else {
// Send the token to your server.
stripeTokenHandler(token);
}
});
// Submit the form with the token ID.
const stripeTokenHandler = (token) => {
// Insert the token ID into the form so it gets submitted to the server
const form = document.getElementById('payment-form'),
hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
I've searched extensively on this site and tried my best, but cannot figure out how to put the label and input on the same line, right now, it displays like this:label and input box are on different lines
First, as people suggested, I grouped them using "form-group" class, but no luck. Then I continued to search, some says you should use "col-sm-1" which I tried, no luck, some says you should use "form-control-static", but still no luck. Any help is deeply appreciated!
<div class="tab-content">
<div class="row" id="create_new_spa_form">
<form method= "post" action ="/purchasing/item_info_new_spa/" onsubmit="javascript: return validate();">
<div class="span4">
<div class="form-group">
<label class="control-label col-sm-1" for="input01">Text input</label>
<div class="controls col-sm-1">
<input type="text" class="form-control-static" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
<div class="span4">
<div class="form-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
</div>
</div>
</div>
</form>
</div>
</div>
After making edits as ZimSystem suggested, now it looks like this:part of first label got truncated
How can I fix this? Also, how can I adjust the size of the input box? I don't need them to be so wide.
Use form-inline and remove the extra markup around the labels and inputs..
<form method="post" action="" class="form-inline">
<label for="input01">Text input</label>
<input type="text" class="form-control-static" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
<label class="control-label" for="input01">Text input</label>
<input type="text" class="input-xlarge" id="input01">
</form>
http://www.bootply.com/7BrrI0uZiH
From the 2.x docs: http://getbootstrap.com/2.3.2/base-css.html#forms
add this to your form
class="form-inline"
more examples here about the Inline form... http://getbootstrap.com/css/#forms
hope this helps :)
How do I display an error message with Foundation 5's Abide HTML5 form validation library when no checkboxes are checked within the same checkbox group?
You have to write your own abide validator, but it is quite simple.
Working example: CodePen link
JavaScript
$(document).foundation({
abide: {
validators: {
checkbox_limit: function(el, required, parent) {
var group = parent.closest('.checkbox-group');
var min = group.attr('data-abide-validator-min');
var checked = group.find(':checked').length;
if (checked >= min) {
group.find('small.error').hide();
return true;
} else {
group.find('small.error').css({
display: 'block'
});
return false;
}
}
}
}
});
HTML
<form data-abide>
<div class="row">
<div class="small-12 column">
<h4>Select your favourite vehicles</h4>
</div>
</div>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-min="1">
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="car" />
car
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="train" />
train
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="bicycle" />
bicycle
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="ferry" />
ferry
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="plane" />
plane
</label>
<small class="error">You have to check at least one vehicle.</small>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
Below is the html JSFiddle - Problem
<div class="row">
<div class="small-3 medium-3 large-3 columns">
<label for="firstName" class="inline">* First Name:</label>
</div>
<div class="small-9 medium-9 large-9 columns">
<input type="text" name="firstName" id="firstName" placeholder="First Name" />
</div>
</div>
The input element spans the entire page width by default. I want to limit the width of the element.
One way to achieve this is by using incomplete rows and adding class end.
See below: JSFiddle - Solution
<div class="row">
<div class="small-3 medium-3 large-3 columns">
<label for="firstName" class="inline">* First Name:</label>
</div>
<div class="small-3 medium-3 large-3 end columns">
<input type="text" name="firstName" id="firstName" placeholder="First Name" />
</div>
Is this the correct way? Or is there any other method to do it.
I am aware that I can use css/modify css but wanted to see if there is any other way to do it using Foundation.
This is the correct way to size input elements.
While there are many ways to do it, wrapping form elements in column classes is the recommended method. For example, to produce an input with 50% width, wrap the input in a large-6 columns end class.
<form>
<div class="row">
<div class="large-6 columns end">
<label>Input Label
<input type="text" placeholder="large-12.columns" />
</label>
</div>
</div>
</form>
I am currently building a site with a contact function. I build the site with Django and Bootstrap. For contacting the people behind the site the user clicks on a element in the top navigation bar called Contact. This elements open a Bootstrap modal. At the moment the modal works as expected and looks like that:
The code is:
<div class="modal fade" id="kontakt" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" class="form-horizontal">
<div class="modal-header">
<h4>Contact us</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="kontakt-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="kontakt-name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="kontakt-email" class="col-lg-2 control-label">E-Mail</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="kontakt-email" placeholder="Email-Address">
</div>
</div>
<div class="form-group">
<label for="kontakt-nachricht" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="kontakt-nachricht" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="submit">Send</button>
Close
</div>
</form>
</div>
</div>
</div>
Because I would like to sent the data that is written by the user to the Django backend I wrote a form that is:
class ContactForm(forms.Form):
name = forms.CharField(max_length=255)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
In order to offer this form to all templates (implemented in the base.html) I wrote a context preprocessor that works fine.
Is there a possibility to render the Django form to my desired html? I tried django-bootstrap3 but this app does not render the label and the input in one row. When I replace the input fields with Django (without any third party application) the class form-control and the id is wrong.