This is my 1st Bootstrap effort, so please bear with me. If this has already been addressed somewhere else, I haven't found it, and a polite pointer would be appreciated.
I am trying to create a Bootstrap 5 form that will run on a Raspberry Pi with no connection to the Internet. I have downloaded the Bootstrap-5.2.0-dist kit to my system and the CSS controls appear to be generally working as described.
I need to do some client side validation to ensure the form is filled out correctly when the Submit button is pressed, or preferably when another input control on the form is selected. As a starting point, I trying to figure out how to make the email address checking work and I seem to be missing something basic.
What do I have to add so that the email field will be evaluated as a properly formatted email address?
Here is my code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create</title>
<link
href="/home/ko2f/eHaW/bootstrap-5.2.0-dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="/home/ko2f/eHaW/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-3 bg-primary text-white text-center">
<h4>Emergency Message Service</h4>
<h1>Create Message</h1>
</div>
<form>
<div class="form-group mb-3 mt-3">
<label for="text" class="control-label">From:</label>
<input type="text" class="form-control" id="from"
placeholder="Enter your name" name="from" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="email" class="control-label">To:</label>
<input type="email" class="form-control" id="email"
placeholder="Enter email address" name="email" required />
</div>
<div class="form-group mb-3 mt-3">
<label for="msg" class="control-label">Message:</label>
<input type="msg" class="form-control" rows="10" id="msg"
placeholder="Enter the message you want to send here..." name="msg" required />
</div>
</form>
<div class="mx-auto" style="width:350px">
<button type="button" class="btn btn-outline-success">Submit</button>
<button type="button" class="btn btn-outline-danger">Cancel</button>
</div>
</body>
</html>
Thank you for considering my question...
Bob Segrest
Thank you stdunbar!
The 2nd pointer you provided to the Mozilla docs and pointing out that I needed to look at HTML rather than Bootstrap itself, was very helpful.
Bob
Related
i have added both cnd link for bootstrap in boilerplate but form still get submited instead of showing error idk what is going wrong even after copying demo form from bootstrap that form also stop working for some reasong idk why. can someone please explain why ?
boilerPlate -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="/style.css">
</head>
<body >
<%- include('navbar/navbar.ejs') %>
<main class="container">
<%- body -%>
</main>
<%- include('navbar/footer.ejs') %>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
form.ejs
<% layout('BaseTemplate') %>
<h1 class="mb-5 offset-5">New product</h1>
<form action="/product" method="post" class="w-50 offset-3 needs-validation" novalidate>
<label for="name" class="form-lable mb-1">Name</label>
<input type="text" id="name" name="name"class="form-control mb-3" required>
<label for="price" class="form-lable mb-1">Price</label>
<input type="number" id="price" name="price"class="form-control mb-3" required>
<label for="description" class="form-lable mb-1">Description</label>
<input type="text" id="description" name="description"class="form-control mb-3" required>
<label for="image" class="form-lable mb-1">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
i want to know why is bootstrap form validation not working
You have the form attribute novalidate on your <form> tag. When present, it specifies that the form-data should not be validated when submitted.
Not related to your issue, you also have a typo on your <label>s: class="form-lable" which sets a margin-bottom of 0.5rem, probably why you added the margin class mb-1 so I removed it in the fixed form:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<form action="/product" method="post" class="w-50 offset-3 needs-validation">
<label for="name" class="form-label">Name</label>
<input type="text" id="name" name="name" class="form-control mb-3" required>
<label for="price" class="form-label">Price</label>
<input type="number" id="price" name="price" class="form-control mb-3" required>
<label for="description" class="form-label">Description</label>
<input type="text" id="description" name="description" class="form-control mb-3" required>
<label for="image" class="form-label">Image</label>
<input type="text" id="image" name="image" class="form-control mb-3" required>
<button type="submit" class="btn btn-outline-info">Submit</button>
</form>
In w3.css there is no option to prepare a form in such a way so that the inputs and labels are appeared on the same line. I am trying but could not fix the problem. Please help to fix the problem.
<div class="w3-row-padding">
<div class="w3-third">
<label class="w3-label">User Name</label>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="Name">
</div>
</div>
This is the code I actually wanted:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-quarter">
<p> <label class="w3-label" type="text">User Name</label><p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your username"></p>
</div>
<div class="w3-quarter">
<p> <label class="w3-label" type="text">Passwords</label></p>
</div>
<div class="w3-threequarter">
<p><input class="w3-input w3-border w3-round" type="text"
placeholder="Enter your passwords"></p>
</div>
</div>
</body>
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here
I am developing MVC 3 application along with it I am using bootstrap for design.
I have created the log in form.
I am trying to set it at center position of the screen but some how its not working.
This is my code.
#using (Html.BeginForm("LoginUser","Login",FormMethod.Post))
{
<div class="container-fluid" style="padding-left:0px; margin-top:165px; margin-left:140px;">
<div class="row-fluid">
<div class="span12 roundedDiv offset4" style="width:400px; height:250px;">
...
...
...
Controls...
....
....
</div>
</div>
</div>
}
what to do ?
Margin auto does this for you, without having to use <center>.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style type="text/css">
#loginBox {
margin: 20% auto;
width: 200px;
}
</style>
</head>
<body>
<form action="index.php" method="POST" id="loginBox">
<input type="text" name="user" placeholder="Username" autocapitalize="off" /><br />
<input type="password" name="pass" placeholder="Password" /><br />
<input type="checkbox" name="remember"> Remember Me<br />
<input type="submit" value="Log In" name="login" />
</form>
</body>
</html>
I would advise against usage of margins for the horizontal alignment. Try something like this:
<div class="container-fluid">
<div style="margin-top:20px;" class="row-fluid">
<div class="offset4 span4 well">
<h1>Login page</h1>
<form method="POST">
<label>Login:
<input type="text" placeholder="Enter your login" name="username" autofocus class="span12">
</label>
<label>Password:
<input type="password" placeholder="Enter your password" name="password" class="span12">
</label>
<hr>
<div class="btn-toolbar">
<button type="submit" class="btn btn-info">Log in</button>Sign in with Google
</div>
</form>
</div>
</div>
This is code I used to build a simple login form.
Since you're using fluid container hence responsive design I'd recommend to avoid using hardcoded values like 400 px. Instead you can set it width by applying span class like:
<div class="row-fluid">
<div class="offset3 span6">
It gives you login form width of 6 rows and 3 rows offset on the left and right (12 rows is default bootstrap grid).
Please help me on this. I am new to CSS and jQuery Mobile and I got this issue.
The checkboxes in my page do not display the box; only the label. When I click the label, a square appears on the left.
Now, the issue only happens if I download the CSS file to my local file and refer that. If I refer the CSS file from the server directly, the box appears before the text and works normally. Below are the sample source:
Source which has error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width">
<link rel="stylesheet" href="../jQuery/jquery.mobile.css">
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Source which does not have error:
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile App Login</title>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<script src="../jQuery/jquery.js"></script>
<script src="../jQuery/jquery.mobile.js"></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Login Screen</h1>
</div>
<div data-role=content>
<label>
<input type="checkbox" name="checkbox-0" />
I agree
</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</div>
</div>
</body>
</html>
Everything else works fine; it is just the display of the box that causes me the problem. I took the latest files for the CSS and JS files and checked.
Without the box, the user may think it is just a label
Since I am new, I am unable to give an image, I'm sorry...
Thanks all.
Adding checkbox inside fieldset for me solved the same problem.
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">I agree</label>
</fieldset>