I built a simple contact form using foundation and its abide plugin. It's basically working, except one thing: The validation for the email input field.
If I submit the form without entering any data, abide shows both validation error messages correctly.
If I enter just input into the message textarea and leave the email input blank, then abide prevents submitting the form, but it doesn't show the error message. It just marks the email input as invalid.
If I enter a valid email address and leave the message textarea blank, then abide shows both validation error messages although the email address is correct.
You can check it on jsbin: https://output.jsbin.com/cacucunama
Minimal running example (same as jsbin):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>ZURB Foundation Abide form validation error</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/foundation-sites#6.6.3/dist/css/foundation.min.css">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/foundation-sites#6.6.3/dist/js/foundation.min.js"></script>
</head>
<body>
<form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
<div class="input-group">
<span class="input-group-label">N</span>
<input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
placeholder="Name">
</div>
<div class="input-group">
<span class="input-group-label">#</span>
<input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
placeholder="Email address*" required pattern="email">
</div>
<label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
<textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
required=""></textarea>
<label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
<button value="" type="submit" class="button expanded">Send</button>
</form>
</body>
</html>
As already answered at https://foundation.discourse.group/t/abide-doesnt-show-the-correct-validation-error-message/2276/10 you forgot to wrap the label + input pars in the part with the email input and message textarea.
https://codepen.io/DanielRuf/pen/dyYpjYZ
It works with the following code:
<form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
<div class="input-group">
<span class="input-group-label">N</span>
<input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
placeholder="Name">
</div>
<div>
<div class="input-group">
<span class="input-group-label">#</span>
<input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
placeholder="Email address*" required pattern="email">
</div>
<label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
</div>
<div>
<textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
required=""></textarea>
<label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
</div>
<button value="" type="submit" class="button expanded">Send</button>
</form>
Related
I have tried different CSS properties to make the form scrollable but none is working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script> #CDN added here
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script> #CDN added here
</head>
<body>
<div data-spy="scroll" class="container"> #Added here
<h2>Form</h2>
<form class="form-inline" action="/action_page.php">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<br />
<button type="submit" class="btn btn-primary">Submit</button>
<br />
<label for="email">Email:</label><br /><br />
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email"><br /><br />
<label for="pwd">Password:</label><br /><br />
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"><br /><br />
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div><br /><br />
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Just add like below tag:
#Updated here
<div data-spy="scroll" data-target=".nav"> #.nav is classname from navbar
<form>
#Add here your form
</form>
</div>
The form must be inside div tag and now form is scrollable.
And now your problem is solved.
Happy coding!
I am trying trying to integrate bootstrap into my Django site but it doesn't look quite right. I was looking for CSS clashes but the only stuff I could find is in the static folder and it just has admin related CSS. All my pages work its just the CSS that looks a bit off. Any help is great, thanks.
<!-- templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
{% block nav %}
<ul id="nav">
<li>{% block nav-home %}Home{% endblock %}</li>
</ul>
{% endblock %}
<div id='content' class='main'>
{% block content %}
{% endblock %}
</div>
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
<!-- templates/registration/login.html -->
{% extends "base.html" %}
{% block title %}Log in{% endblock %}
{% block content %}
<section class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h3 class="mb-5">Sign in</h3>
<div class="form-outline mb-4">
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX-2">Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX-2">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" />
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
<hr class="my-4">
<button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
<button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
Expected:
Actual:
The problem isn't with your library imports. It's with your syntax. Make sure you're following the correct documentation version.
Inputs won't have internal labels if you use label elements like that. Use aria-label and placeholder attributes on the input element instead.
Buttons aren't sized with btn-block in Bootstrap 5. Use the w-100 sizing class instead.
Buttons don't have uppercase labels in Bootstrap 5, either. That screenshot must be from an earlier version.
And buttons won't have default margin. Use spacing classes as needed.
Font sizes are calculated and configured differently from earlier versions as well.
in the email and password input tags include
<input ..... placeholder="Email">
Doing this will put email inside of the text box.
If you do this...
<div class="form-outline mb-4">
<label class="form-label" for="typePasswordX-2">Password</label>
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
</div>
The label will appear above the text box. If you do not want just get rid of the label tag. I recommend leaving it on as it helps with accessibility.
and add a
<br/>
tag between the buttons
I have a form on my index.html and I have a app.py to process it but it does nothing. The data isnt processed and the redirect doesnt happen. Pressing the submit button does nothing so it seems as if the app.py isnt working but I have app.py running and Im using http://127.0.0.1:5000/. In my terminal app.py is running without any errors.
app.py
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/submit', methods=['POST'])
def submit():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
phone = request.form['phone']
message = request.form['message']
print(name, email, phone, message)
return render_template('success.html')
if __name__ == '__main__':
app.debug = True
app.run()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/b015121141.js"></script>
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="../static/css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="../static/css/widescreen.css">
<title>System Services</title>
</head>
<body id="home">
<!-- Section: Contact-->
<section id="contact">
<div class="contact-form bg-primary p-2">
<h2 class="m-heading">Contact Us</h2>
<p>Please Use the form below to contact us</p>
<form action="/submit" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="Enter Phone">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message" placeholder="Enter Message"></textarea>
</div>
<input type="submit" value="Submit" class="btn btn-dark">
</form>
</div>
<div class="map"></div>
</section>
<!-- Footer -->
<footer id="main-footer" class="bg-dark text-center py-1">
<div class="container">
<p>Copyright © 2019, All Rights Reserved</p>
</div>
</footer>
</body>
</html>
I ran your code and works fine. I checked your POST values in your view and they are all there. The only error i got was that success.html does not exist which actually was not there. Create the success.html file in yor templates folder and you should be fine.
Your code just work fine insofar as you add sucess.html
If you have any more issues, I invite you to check one of my project (well documented) which uses django POST method and generate something (in my case a .docx file with user datas) : Flask Docx Generator
If this project was helful you can upvote my answer and put it as the answer of your problem :)
A login form is submitted and when I try and dump the values the form structure is empty in IE but not FF or Chrome. This is in a DEV environment using HTTPS and a corporate self signed certificate.
I don't really think this is Fusebox related but it is the framework I'm using. No choice in the matter as it is legacy code and no budget to change it so please don't suggest I move on.
I've discovered that in IE it doesn't like the form action to be of the format:
/directory/index.cfm?fuseaction=app.Security
Instead it wants a fully qualified action
https://www.mycompany.com/directory/index.cfm?fuseaction=app.Security
<form action="/directory/index.cfm?fuseaction=app.Security" name="loginForm" id="loginForm" method="post">
<div style="width:55%;" align="center" id="fieldset">
<fieldset class="border" style="width:70%;">
<legend>Login</legend>
<div style="padding:2%">
<label for="userID">User ID: <span id="error1" class="redbold" aria-live="assertive"></span> </label>
</div>
<div>
<span class="required">*</span> <input type="text" name="userID" id="userID" size="32" maxlength="8" value="" />
</div>
<div style="padding:2%">
<label for="pw">Password: <span id="error2" class="redbold" aria-live="assertive"></span></label>
</div>
<div>
<span class="required">*</span> <input type="password" name="pw" id="pw" size="32" maxlength="20" value="" />
</div>
<div style="padding:2%" id="formButtons">
<input type="submit" value="Login" class="buttonfield" title="Login to eAgenda" />
<span style="padding-left:5%; margin-left:5%">
<input type="reset" value="Clear" class="buttonfield" title="Clear" />
</span>
<div id="errorMsg">
<p>
<span class="redbold"></span>
</p>
</div>
</div>
<span class="required">*</span>Mandatory field
</fieldset>
</div>
</form>
In the end it was a <base href="http://..."/> tag in the header. Removing or making it https solved the problem.
I am using check box control in a simple django application. When I use the standard check box control, I can get the desired values in views.py. But I fail to get the values when I use bootstrap check box control. Logic seems to be fine, I don't know why it's not working. Can anybody point out the mistake, Thanks in advance.
Standard Way
<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
Bootstrap Way
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="fruit">
<label class="form-check-label" for="fruit">Mango</label>
</div>
view.py
if request.method == 'POST':
fruit = request.POST.getlist('fruit')
You have set id="fruit" for both and for="fruit" for both.
Those need to be different for different checkboxes.
Also, the values were set to empty in your case.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Apple" id="apple">
<label class="form-check-label" for="apple">Apple</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Mango" id="mango">
<label class="form-check-label" for="mango">Mango</label>
</div>
</div>
</div>
</div>