I have a validation form in bootstrap4 when I enter less than 5 characters it shows me an error.
When I enter 5 or more than 5 characters I want to put a green check-mark and border on that particular input field.
<div class="container">
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="username">username:</label>
<input type="text" class="form-control" id="name" placeholder="username" required>
</div>
<input type="submit" class="btn btn-primary" value="submit" >
</form>
</div>
<script src="./dist/bootstrap-validate.js"></script>
<script>
bootstrapValidate('#name', 'min:5:Enter at least 5 charecters');
</script>
</body>
</html>
https://github.com/NinoosMoshi/form-validation.git
You need a few things in your code...
you got the condition correct, need to add/remove classes as a result of bootstrapValidate
import the icon library (i used font awesome v5)
in the classes you add/remove, you gotta place the icon for the check mark
UPDATE:
in light of questioner's comment of multiple fields in the form
Following code should help:
$(document).ready(function() {
bootstrapValidate('#usr', 'min:5:Enter at least 5 characters!', function(isValid) {
if (isValid) {
$("#formHolder").addClass('validClass');
$("#formHolder").removeClass('invalidClass');
} else {
$("#formHolder").addClass('invalidClass');
$("#formHolder").removeClass('validClass');
}
});
bootstrapValidate('#lastName', 'min:7:Enter at least 7 characters!', function(isValid) {
if (isValid) {
$("#formHolder2").addClass('validClass');
$("#formHolder2").removeClass('invalidClass');
} else {
$("#formHolder2").addClass('invalidClass');
$("#formHolder2").removeClass('validClass');
}
});
});
.validClass>input {
border: 2px solid green;
}
.validClass .form-control:focus {
border-color: green;
box-shadow: 0 0 0 0.2rem rgba(33, 93, 30, 0.56)
}
.invalidClass>input,
.invalidClass .form-control:focus {
border: 2px solid red;
}
.inputWrapper {
display: inline-block;
position: relative
}
.validClass:after {
font-family: "Font Awesome 5 Free";
content: "\f00c";
visibility: visible;
font-weight: 900;
color: green;
position: absolute;
right: 6px;
top: 55%;
}
.invalid-feedback {
position: absolute;
display: inline-block;
bottom: -100px;
left: 0px;
}
.submitBtn {
margin-top: 20px;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<div class="container mt-3">
<form>
<div class="form-group">
<div class='inputWrapper invalidClass' id='formHolder'>
<label for="usr">Name:</label>
<input type="text" class="form-control " id="usr">
</div>
<br/>
<div class='inputWrapper invalidClass' id='formHolder2'>
<label for="lastName">last Name:</label>
<input type="text" class="form-control " id="lastName">
</div>
</div>
<button type="submit" class="btn btn-primary submitBtn">Submit</button>
</form>
</div>
Related
I want to validate the user name and password, if the name and password are correct so by clicking "Enter" the user will move to another browser page But I can't take the values the user wrote to the JS (I put a link to YouTube because I don't know how to link to another HTML page)
I would be very happy for some help..
Thanks!
let form = document.getElementById('login').innerHTML;
let password = document.getElementById('passwordbox').innerHTML.value;
let Enter = document.getElementById('Enter').innerHTML.value;
let user = document.getElementById('userlogbox').innerHTML.value;
function check(form)
{
if (form.userid.value == 'abcd') {
window.open('https://www.youtube.com');
} else {
alert("the username you enterd not match");
}
}
function check(form) {
if (form.password.value == '1234') {
window.open('https://www.youtube.com');
} else {
alert("the password you enterd not match");
}
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url(bg.jpg) no-repeat;
background-size: cover;
}
.login-box {
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.login-box h1 {
float: left;
font-size: 40px;
border-bottom: 6px solid #4caf50;
margin-bottom: 50px;
padding: 13px 0;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #4caf50;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input {
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
width: 80%;
float: left;
margin: 0 10px;
}
.btn {
width: 100%;
background: none;
border: 2px solid #4caf50;
color: white;
padding: 5px;
font-size: 18px;
cursor: pointer;
margin: 12px 0;
}
<form id='login' class='login'>
<div id='userlogbox' class="login-box">
<h1>Sudoku</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input type="text" placeholder="Username" name="userid">
</div>
<div id='passwordbox' class="textbox">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" name="password">
</div>
<button><input id='Enter' type="button" class="btn" value="Enter" onclick="check(this.form)" value="Enter"/>
</button>
</div>
</form>
I’m still learning, so it seems like a disaster, but thanks
the thing is that I can't use something we haven't learned yet - addEventListener
So I tried to write like that, you helped me a lot, I'd love to hear why you think it doesn't work
JS
const form = document.getElementById('login');
const userName = document.getElementById('userId');
const password = document.getElementById('userPassword');
const enterBtn = document.getElementById('enter');
const allowedUser = 'abcd';
const allowedPwd = '1234';
enterBtn.onclick() = function(){
if (!userName.value || !password.value) {
prompt('Please enter user & password');
return;
}
else if (password.value != '1234') {
prompt('Please enter password');
return;
}
else if (userName.value != 'abcd') {
prompt('Please enter user');
return;
}
else if (userName.value === allowedUser && password.value === allowedPwd) {
window.location.href = "/Users/ormor/Desktop/Sudoku%20Project%204/Sudoku%20Project/main/";
}
else {
prompt('the username you entered does not match');
return;
}
}
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='ws.css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class='rows'>
<form id='login' class='login'>
<div id='userlogbox' class="login-box">
<h1>Sudoku</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input id="userId" type="text" placeholder="username" name="userid">
</div>
<div id='passwordbox' class="textbox">
<i class="fas fa-lock"></i>
<input id="userPassword" type="password" placeholder="password" name="password">
</div>
<button id='enter' type="button" class="btn btn-danger" onclick="validCheck()">Enter</button>
</div>
</div>
</div>
</div>
</form>
</body>
<script src='ws.js' defer></script>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding-top: 120px;
background: url(33v2wnher48y.jpg) no-repeat;
background-size: 30%;
background-position: 35px, 35px, 35px, 35px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
Please remove parentesis in your btnEnter.onclick
The code is a disaster (many typo error) and i do not understand very well because you do not check also password...however im try to help you because im studing javascript in this moment.
const form = document.getElementById('login');
const userName = document.getElementById('userId');
const password = document.getElementById('userPassword');
const enterBtn = document.getElementById('enter');
const allowedUser = 'abcd';
const allowedPwd = 'something';
enterBtn.addEventListener('click', (event) => {
event.preventDefault();
if (!userName.value || !password.value) {
alert('Please enter user & passowrd');
return;
}
if (userName.value === allowedUser && password.value === allowedPwd) {
window.open('https://www.youtube.com');
} else {
alert('the username you enterd not match');
}
});
I delete the css file (your html and js are fill of typo error and other bad practice)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='script.js' defer></script>
</head>
<body>
<form id='login' class='login'>
<div id='userlogbox' class="login-box">
<h1>Sudoku</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input id="userId" type="text" placeholder="username" name="userid">
</div>
<div id='passwordbox' class="textbox">
<i class="fas fa-lock"></i>
<input id="userPassword" type="password" placeholder="password" name="password">
</div>
<button id='enter' type="button" class="btn">
Enter
</button>
</div>
</form>
</body>
</html>
Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.
I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.
Why can't I click on the icon? If I click it, I don't get an alert.
$('#copy_address').click(function(e) {
alert("Teszt");
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label>
<div class="col-sm-9 inner-addon right-addon">
<i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i>
<input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="<?php echo html($data['ajanlatkeres_email']); ?>" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove pointer-events: none;property from css of class .inner-addon i. Check the working snippet below
$('#copy_address').click(function(e) {
alert("Teszt");
});
.inner-addon {
position: relative;
}
.inner-addon i {
position: absolute;
padding: 10px;
/*pointer-events: none;*/ /*remove this property*/
}
.left-addon in {
left: 0px;
}
.right-addon i {
right: 10px;
cursor:pointer !important;
z-index:999;
}
.left-addon input { padding-left: 30px; } .right-addon input { padding-right: 30px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="control-label col-sm-3" for="kapcsolat_email">E-mail cím</label>
<div class="col-sm-9 inner-addon right-addon">
<i class="fa fa-clipboard" aria-hidden="true" id="copy_address"></i>
<input class="form-control" id="ajanlatkeres_email" name="ajanlatkeres_email" type="text" value="test#test.com" />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This question already has answers here:
Best way to track onchange as-you-type in input type="text"?
(16 answers)
Closed 8 years ago.
I am trying to detach if input text box is changed (user has stopped typing) using javascript so that I can validate the form and show the error message if required. I know it can be done using jQuery but I wish to do it in pure javascript.
http://jsfiddle.net/xstqLkz4/2/
The above link demonstrate it using jQuery
I don't have much code. I am not sure from where to start.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript validate</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script src="domready.js"></script>
<script>
DomReady.ready(function() {
(function () {
var Username = document.getElementById("Username");
var Password = document.getElementById("Password");
var DOB = document.getElementById("DOB");
var Email = document.getElementById("Email");
var Country = document.getElementById("Country");
if (Username.length <= 5){
alert("Less then 5");
}
})();
});
</script>
<style>
body{
font-family: 'Lato', sans-serif;
position: absolute;
}
label{
font-size: 1.2em;
margin-right: 5px;
}
input[type='text'], input[type='password']{
border: none;
padding: 7px;
background-color: rgba(242, 240, 240, 1);
font-family: 'Lato', sans-serif;
font-size: 0.85em;
font-weight: 100;
}
input[type='password'], input[type='text'], input[type='submit']{
margin-top: 18px;
}
input[type='password']{
margin-left: 32px;
}
input[type='submit']{
padding: 10px 119px;
background-color: #F2F0F0;
border: medium none;
font-family: "Lato",sans-serif;
margin-top: 24px;
font-size: 1.4em;
font-weight: 500;
}
#wrp{
width: 800px;
position: relative;
left: 438px;
top: 32px;
}
#Username{
margin-left: 25px;
}
#DOB{
margin-left: 3px;
}
#Email{
margin-left: 70px;
}
#Country{
margin-left: 43px;
}
.errortxt{
color: rgba(206, 145, 145, 1);
}
.error{
background-color: rgba(242, 228, 228, 1);
}
</style>
</head>
<body>
<div id="wrp">
<form action="">
<div>
<label for="Username">Username</label>
<input type="text" id="Username">
</div>
<div>
<label for="Password">Password</label>
<input type="password" id="Password">
</div>
<div>
<label for="DOB">Date of birth</label>
<input type="text" id="DOB">
</div>
<div>
<label for="Gender">Gender</label>
<div>
<label for="Male">Male</label>
<input type="radio">
<label for="Female">Female</label>
<input type="radio">
</div>
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="Email">
</div>
<div>
<label for="Country">Country</label>
<input type="text" id="Country">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
The jsFiddle seems pretty straight forward (although, the timing might be a bit short).
This code ...
$("#input").on("input" ...
... seems to indicate that it is being run on a single <input> tag. You might want to shift this to a class and perform the validation where the alert() fires.
I have been working on a Calculator. Every time a an operation takes
place, answer gets alerted or in console.log();. I wonder if there
was any script from which I could print the answer in a Text box.
I am Using <div> also which has caused problems with my footer. if i
don't do breaks <br> then the footer would go to the centre of the
left <div>.
HTML:
<!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">
<title>BlackForest</title>
</head>
<body>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
<div class="jumbotron">
<h1 class="span2"><kbd>BlackForest</kbd></h1>
</div>
<header>
<ul class="nav nav-pills">
<li class="active"><a class="btn btn-lg" href="#">Home</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
</ul>
</header>
<!-- div start -->
<div class="left">
<h1 id="hbody">Calculator</h1>
<form name="form" action="" method="POST">
Enter First Number: <br>
<input type="text" name="numone" value="">
<br>
<br>
Enter Second Number: <br>
<input type="text" name="numtwo" value="">
<br>
<br>
<input type="button" name="addition" value="Add" onClick="dataAdd(this.form)">
<input type="button" name="subtraction" value="Subtract" onClick="dataSubtract(this.form)">
<input type="button" name="multiply" value="Multiply" onClick="dataMultiply(this.form)">
<input type="button" name="division" value="Divide" onClick="dataDivide(this.form)">
</form>
</div>
<center>
<div class="right">
<p class="lead"><strong><kbd>Login</kbd></strong></p><br>
<div class="well">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"><kbd>Email address</kbd></label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1"><kbd>Password</kbd></label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
</form>
</div>
</div>
</center>
<!-- div end -->
<script language="JavaScript">
function dataAdd (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsSum = parseInt(jsnumone)+ parseInt(jsnumtwo);
console.log("Sum: " + jsSum);
alert(jsSum);
}
function dataSubtract (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsSub = jsnumone-jsnumtwo;
console.log("Difference: " + jsSub);
alert(jsSub);
}
function dataMultiply (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsMultiply = Math.abs(jsnumone*jsnumtwo);
console.log("Product: " + jsMultiply);
alert(jsMultiply);
}
function dataDivide (form) {
var jsnumone = form.numone.value;
var jsnumtwo = form.numtwo.value;
var jsDivide = Math.abs(jsnumone/jsnumtwo);
console.log("Quotient: " + jsDivide);
alert(jsDivide);
}
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
<center>
<p class="lead">© 2014 Tanishq Jain</p>
</center>
</footer>
</body>
</html>
CSS code:
body {
background: #999;
background-color: #999;
margin: 10px;
color: #333;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
margin: 0 auto;
}
body footer {
color: #222;
background: #999;
}
body h1 {
color: #222;
background: #999;
margin: 0;
padding-top: 0 !important;
padding: 10px;
background-color: #999;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
body h1:hover {
outline: none;
}
div.left {
width: 70%;
padding-left: 10px;
margin-left: 25px;
float: left;
color: #333;
background: #999;
border: 0;
background-color: #999;
}
div.right {
width: 30%;
padding-left: 0 5px 0 0;
float: right;
color: #333;
background: #999;
background-color: #999;
border: 0;
font-size: 14px;
}
div.well {
background: #999;
border: 0;
}
div.jumbotron {
background: #999;
padding-top: 20px !important;
margin-bottom: 0;
padding-bottom: 30px;
}
div.form-group {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
button.btn:hover {
border-color: #777;
background: linear-gradient(#acda44 0%, #689600 100%);
}
body header li a {
margin-left: 45px;
background-color: #444 !important;
border-radius: 4px;
color: white;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
body header li a:hover {
color: white;
border-color: #777;
background: linear-gradient(#acda44 0%, #689600 100%);
border-color: black;
border: 3px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#spacing {
margin-left: 0;
}
#hbody {
padding-top: 10px !important;
}
.lead {
padding-left: 10px !important;
}
create a text input inside body tag
<input type="text" id="num_text"></input>
then in javascript do the following
document.getElementById("num_text").innerHTML="whatever your text or number";
for footer part you can have a look at http://css-tricks.com/snippets/css/sticky-footer/
HTML:
<input type="text" id="result" />
JAVASCRIPT:
var result = //get from calculation
document.getElementById("result").value=result; // Put result in input box
html
<inpur type="text" id= "resultText" />
<div id="resultDiv"></div>
javascript
var result = 5 +5;
document.getElementById("resultText").value=result; // result displays in textbox
document.getElementById("resultDiv").innerHTML=result; // result displays in div
jquery
var result = 5 +5;
$('#resultText').val(result); // result displays in textbox
$('#resultDiv').html(result);// result displays in div
and for your footer try relative property, below i given basic styles for footer
<style>
.footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
</style>
<div class="footer">footer content</div>
Make a third textbox after you have made the second text
Answer: <br>
<input type="text" name="ans" value="">
Now in javascript where you have alert the answer write code
document.getElementById("ans").value==jsSum;
Similarly do it for subtract, multiply and divide.
document.getElementById("ans").value==jsSub;
document.getElementById("ans").value==jsMultiply;
document.getElementById("ans").value==jsDivide;
Sorry I couldn't help you with the footer problem.
This is the whole HTML
<!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">
<title>BlackForest</title>
</head>
<body>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
<div class="jumbotron">
<h1 class="span2"><kbd>BlackForest</kbd></h1>
</div>
<header>
<ul class="nav nav-pills">
<li class="active"><a class="btn btn-lg" href="#">Home</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Profile</a></li>
<li><a class="btn btn-lg" href="#" id="spacing">Messages</a></li>
</ul>
</header>
<!-- div start -->
<div class="left">
<h1 id="hbody">Calculator</h1>
<form name="form" action="" method="POST">
Enter First Number: <br>
<input type="text" name="numone" value="" id="numone">
<br>
<br>
Enter Second Number: <br>
<input type="text" name="numtwo" value="" id="numtwo">
<br>
<br>
Answer: <br>
<input type="text" name="ans" value="" id="ans">
<br>
<br>
<input type="button" name="addition" value="Add" onClick="dataAdd()">
<input type="button" name="subtraction" value="Subtract" onClick="dataSubtract()">
<input type="button" name="multiply" value="Multiply" onClick="dataMultiply()">
<input type="button" name="division" value="Divide" onClick="dataDivide()">
</form>
</div>
<center>
<div class="right">
<p class="lead"><strong><kbd>Login</kbd></strong></p><br>
<div class="well">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1"><kbd>Email address</kbd></label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1"><kbd>Password</kbd></label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter Password">
</div>
<button type="submit" class="btn btn-default btn-lg" id="buttoncolor"><strong>Login</strong></button>
</form>
</div>
</div>
</center>
<!-- div end -->
<script language="JavaScript">
function dataAdd()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)+parseInt(n2);
}
function dataSubtract()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)-parseInt(n2);
}
function dataMultiply()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)*parseInt(n2);
}
function dataDivide()
{
n1=document.getElementById('numone').value;
n2=document.getElementById('numtwo').value;
document.getElementById('ans').value=parseInt(n1)/parseInt(n2);
}
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer>
<center>
<p class="lead">© 2014 Tanishq Jain</p>
</center>
</footer>