Javascript Alert Box with Radio Button

Javascript Alert Box with Radio Button - javascript

I am a beginner in Javascript, and I have a question to ask- how do you make the submit button show an alert box when no radio button is selected? I've tried a lot of times but nothing seems to work- any help would be greatly appreciated. Thank you.
<html>
<head>
<title> Reviewer </title>
<style type="text/css">
body
{
background-image: url("reviewerbackground.jpg");
background-attachment: fixed;
font-family: verdana;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
line-height: 1.5;
font-size: 100%;
}
h1
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
line-height: 1.5;
}
p
{
border: none;
width: 90%;
line-height: 1.5;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
background: tan;
padding: 3px;
text-align: left;
}
</style>
<script type="text/javascript">
function question1() {
var option = document.querySelector('input[name = "question1"]:checked').value;
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
</script>
</head>
<body link="white" vlink="white">
<br>
<h1> Reviewer </h1> </br>
<center>
<p> 1. (Question- Answer will be D, the 4th radio button)
<br>
<br>
<input type="radio" name="question1" value="a"> choice a
<br>
<input type="radio" name="question1" value="b"> choice b
<br>
<input type="radio" name="question1" value="c"> choice c
<br>
<input type="radio" name="question1" value="d"> choice d
<br>
<br>
<input class="button" type="button" onclick="question1()" name="question1" value="Submit">
</p> </center>
<br>
</body>
</html>

try this:
function question1 () {
var option = getRVBN('question1');
//Check if no radio is selected
if(option==''){
alert("No radio button is selected");
return false;
}
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
function getRVBN(rName) {
var radioButtons = document.getElementsByName(rName);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) return radioButtons[i].value;
}
return '';
}
The function getRVBN() comes from this post Getting the selected radio without using "Id" but "name"
Here is fiddle:
http://jsfiddle.net/T9Lpr/18/

There is just a simple problem here, on the first line of your function, you have your querySelector mapped out correctly, but the :checked needs a space before it to work.
Like so:
var option = document.querySelector('input[name = "question1"] :checked').value;

Related

CSS styling my page, sorry guys im a noob

I have my website code below, however my problem is not with its functionality rather its with its appearance
var name;
var nameFormat = true;
var totalRight=0;
var welcomeName
$("#welcome2").hide();
$("#welcome2-0").hide();
$('form').hide();
$("#MYsubmit").hide();
var score;
function submission() {
var name = document.getElementById("textbox").value;
if (name.length > 0) {
alert("Welcome " + name);
$("#name").fadeOut(1000);
$("#welcome").fadeOut(1000);
$("#welcome2").show();
$("#welcome2-0").show();
$('MYsubmit').show();
$('form').show();
welcomeName=document.getElementById("welcome3-1").innerHTML +="Welcome "+name+"!"+"Good Luck!";
} else {
nameFormat == false;
alert("Please enter the name again");
}
}
var welcomeName=document.getElementById("Question1").innerHTML +="1. How long does it take the average person to fall asleep?";
var welcomeName=document.getElementById("Question2").innerHTML +="2.How many eggs does the average american eat per year?";
var welcomeName=document.getElementById("Question3").innerHTML +="3.How many taste buds does the average american have?";
var welcomeName=document.getElementById("Question4").innerHTML +="4.What is the average lifespan of a squirrel?";
var welcomeName=document.getElementById("Question5").innerHTML +="5.on average __% of all restaurant meals include potato chips";
function finalsubmit() {
if(document.getElementById('correctAnswer-1').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-2').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-3').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-4').checked) {
totalRight=totalRight+1;
}
if(document.getElementById('correctAnswer-5').checked) {
totalRight=totalRight+1;
}
document.getElementById("score").innerHTML +="RESULT for "+name+"You Scored "+totalRight+" out of 5!"+"<br>";
score=document.getElementById("ans").innerHTML +="You scored "+totalRight+" out of 5";
if(totalRight==5){
document.getElementById("score").innerHTML +="You score 5/5 PERFECT!";
}
}
/*
$(document).ready(function(){
$("#hint1").mouseover(function(){
$("#hint1").
});
$("#hint1").mouseout(function(){
$("#hint1").
});
});
*/
$(document).ready(function(){
$('#hint1').hover(function() {
$(this).text("7Minutes");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("263Eggs");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint3').hover(function() {
$(this).text("10,000");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint4').hover(function() {
$(this).text("7Years");
},
function() {
$(this).text("[HINT]");
});
});
$(document).ready(function(){
$('#hint5').hover(function() {
$(this).text("7%");
},
function() {
$(this).text("[HINT]");
});
});
#welcome{
top:30px;
left: 30px;
color: antiquewhite;
border: 2px solid darkblue;
background: darkblue;
padding: 25px;
}
#name{
top:30px;
left: 500px;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
body {
background-color: lightblue;
color: white;
}
#welcome2{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
#welcome3-1{
top:30px;
left: 500px;
color: Aqua;
background:darkblue;
border: 25px solid darkblue;
}
#welcome2-0{
text-align: center;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.Question{
text-align: left;
color: antiquewhite;
background: darkblue;
border: 25px solid darkblue;
}
.hints{
color: aquamarine;
background: darkblue;
border: 25px solid darkblue;
}
.quiz{
background: darkblue;
}
#ans{
text-align: left;
border: 25px solid darkblue;
background: darkblue;
color:red;
}
#score{
background-color: yellow;
color:red;
background-size: 100px 100px;
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="stylesheet" href="includes/styles.css" type="text/css" media="screen" />
</head>
<p>
<body>
<div id="welcome"><b>Welcome to the Myanmar Trivia Quiz</b><br> please enter your name and click on "Begin Quiz" to start</div>
<div id="name"><b>Name:</b>
<input type="text" id="textbox">
<button id=”myButton” type="button" onclick="submission()">submit</button>
</div>
<h1 id="welcome2">Myanmar Trivia Quiz </h1>
<div id="welcome2-0">Test your Demographic Knowledge<br>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div>
<div id="welcome3-1"><b></b></div>
<div id="ans"><h3></h3></div>
<form class="quiz">
<div id="Question1" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Minutes" id="correctAnswer-1" class="Answer"> 7 Minutes<br>
<input type="radio" name="radiobutton" value="5Minutes" >5 Minutes<br>
<input type="radio" name="radiobutton" value="20Minutes" >20 Minutes <br>
<input type="radio"name="radiobutton" value="14Minutes" >14 Minutes <br>
<div id="hint1" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question2" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="263Eggs" id="correctAnswer-2">263 eggs a year<br>
<input type="radio" name="radiobutton" value="23Eggs">23 eggs a year<br>
<input type="radio" name="radiobutton" value="100Eggs">100 eggs a year<br>
<input type="radio" name="radiobutton" value="45Eggs">45 eggs a year<br>
<div id="hint2" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question3" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="10,000" id="correctAnswer-3">10,000<br>
<input type="radio" name="radiobutton" value="4000">4000<br>
<input type="radio" name="radiobutton" value="20,000">20,000<br>
<input type="radio" name="radiobutton" value="537">537<br>
<div id="hint3" class="hints">[HINT]</div>
</form>
<form class="quiz">
<div id="Question4" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7Years" id="correctAnswer-4"> 7 Years<br>
<input type="radio" name="radiobutton" value="5Years">5 Years<br>
<input type="radio" name="radiobutton" value="20Years">20 Years <br>
<input type="radio" name="radiobutton" value="14Years">14 Years <br>
<div id="hint4" class="hints">[HINT]</div>
<form class="quiz">
<div id="Question5" class="Question"><b></b></div>
<input type="radio" name="radiobutton" value="7%" id="correctAnswer-5"> 7%<br>
<input type="radio" name="radiobutton" value="5%">5%<br>
<input type="radio" name="radiobutton" value="20%">20%<br>
<input type="radio" name="radiobutton" value="14%">14%<br>
<div id="hint5" class="hints">[HINT]</div>
<br>
<br>
<button id=”MYsubmit” type="button" onclick="finalsubmit()">submit</button>
<div id="score"></div>
<div id="COPYRIGHT">Copyright © 2019. All rights reserved</div>
</form>
</body>
<script src="includes/scripts.js"></script>
</html>
. I would like the dark blue backgrounds touching each other, and I would like my radio buttons moved so they are below the answers,also I would like to do the same with the hint, and welcome comment. Im new with css so i apologize if its done poorly, im having a hard time figuring this one out and would appreciate any help. thank you guys alot!

Maybe you can use tooltip? Example from w3schools
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">HINT
<span class="tooltiptext">Put your hint here</span>
</div>

I'm pretty sure you should just use Tooltip instead of mouseover ^^
JQuery Tooltip
$("#hint1").tooltip();
with title as attribute for the texts.
Here's the Codepen Demo

I found the answer, skipped the animations but got it working using this code below:
$(document).ready(function(){
$('#hint2').hover(function() {
$(this).text("hover text");
},
function() {
$(this).text("back to origonal");
});
});

How to swap text both on hover and onclick

I have a default message on the top of a donation form and I would like it to change dynamically depending on which amount the user hovers or clicks.
Each amount as well as "€Other" should have a corresponding message. For Example: "with €5.00 we can accomplish this..." With €10.00 we could do that..."
These messages should change accordingly on hover but also remain visible if the corresponding option is selected.
If the user deselects a previously selected option or if no option is selected, the default message should reappear.
I've tried different methods without success, I would really appreciate some help making this happen.
FIDDLE
HTML
<p>Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label><input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;"/>
<input class="donation-button" type="submit" value="Send Donation">
</form>
JavaScript
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
});
$(".checkbutton").change(function() {
if($(this).is(":checked")) {
$(".textBox").val("");
}
});
CSS
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow:none;
box-shadow:inset 0 0 4px 0 #000;
-moz-box-shadow:inset 0 0 4px 0 #000;
-wevkit-box-shadow:inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}

David! Finally i improved it :)
You can customize your own message in HTML seperatly by data-alertOnHover which shown on hover on button or textBox and data-alertAfter which shown select a button or type a number in textBox. It covers all of states as well as less cumbersome.
Also
if the user deselects a previously selected option or if no option is
selected, the default message will reappear.
var defaultTxt = $('#alert').text();
var checked;
$('input.checkbutton').change(function() {
if ($(this).is(":checked")) {
$(".textBox").val("");
$('#alert').text($(this).attr("data-alertAfter") + $(this).val());
checked = $(this);
}
else
{
$('#alert').text(defaultTxt);
checked = undefined;
}
$('input.checkbutton').not(this).prop('checked', false);
});
$('.input-container').hover(
function() {
$('#alert').text($(this).children('input').attr("data-alertOnHover"));
},
function() {
if (checked)
$('#alert').text($(checked).attr("data-alertAfter") + $(checked).val());
else
$('#alert').text(defaultTxt);
}
);
$(".textBox").focus(function() {
checked = undefined;
$(".checkbutton").prop("checked", false)
}).blur(function() {
if ($(this).val() != "") {
checked = $(this);
$('#alert').text($(this).attr("data-alertAfter") + $(this).val())
}
});
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow: none;
box-shadow: inset 0 0 4px 0 #000;
-moz-box-shadow: inset 0 0 4px 0 #000;
-wevkit-box-shadow: inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="alert">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="5,00" data-alertOnHover="With €5.00 we can accomplish this..." data-alertAfter="Your donation will be €"><span>€05.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="10,00" data-alertOnHover="With €10.00 we could do that..." data-alertAfter="Your donation will be €"><span>€10.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="15,00" data-alertOnHover="With €15.00 we could do that..." data-alertAfter="Your donation will be €"><span>€15.00</span></label>
<label class="input-container">
<input type="checkbox" name="amount" class="checkbutton" value="20,00" data-alertOnHover="With €20,00 we could do more than that..." data-alertAfter="Your donation will be €"><span>€20.00</span></label>
<span class="input-container">
<input type="number" class="textBox" name="amount" placeholder="€ Other" data-alertOnHover="just type how much you want to donate..." data-alertAfter="Your donation will be €">
</span>
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;" />
<input class="donation-button" type="submit" value="Send Donation">
</form>

i think this is exactly do what you need.
JSFIDDLE
HTML is not changed but "id" of:
<p id="alert">Choose below the amount of your donation</p>
Javascript
var defaultTxt = $('#alert').text();
$('input.checkbutton').change( function() {
$('input.checkbutton').not(this).prop('checked', false);
if($(this).is(":checked")) {
$(".textBox").val("");
}
var check = $(this).prop('checked');
var value = $(this).val();
switch(value)
{
case("5,00"):
if(check)
$('#alert').text("with €5.00 we can accomplish this...");
else
$('#alert').text(defaultTxt);
break;
case("10,00"):
if(check)
$('#alert').text("With €10.00 we could do that...");
else
$('#alert').text(defaultTxt);
break;
case("15,00"):
if(check)
$('#alert').text("With €15.00 we could do that...");
else
$('#alert').text(defaultTxt);
break;
case("20,00"):
if(check)
$('#alert').text("With €20,00 we could do more than that...");
else
$('#alert').text(defaultTxt);
break;
default:
$('#alert').text("");
break;
}
});
$('input.checkbutton').hover(function() {
alert();
},function() {
}
);
$('input.checkbutton').parent().hover(
function() {
var value = $(this).children('input.checkbutton').val();
switch(value)
{
case("5,00"):
$('#alert').text("with €5.00 we can accomplish this...");
break;
case("10,00"):
$('#alert').text("With €10.00 we could do that...");
break;
case("15,00"):
$('#alert').text("With €15.00 we could do that...");
break;
case("20,00"):
$('#alert').text("With €20,00 we could do more than that...");
break;
default:
$('#alert').text("");
break;
}
}, function() {
var othervalue = $('input.checkbutton:checked').val();
switch(othervalue)
{
case("5,00"):
$('#alert').text("with €5.00 we can accomplish this...");
break;
case("10,00"):
$('#alert').text("With €10.00 we could do that...");
break;
case("15,00"):
$('#alert').text("With €15.00 we could do that...");
break;
case("20,00"):
$('#alert').text("With €20,00 we could do more than that...");
break;
default:
$('#alert').text("");
break;
}
}
);
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
$('#alert').text(defaultTxt);
});
$(".textBox").blur(function() {
var txtVal = $(this).val();
if(txtVal != "")
$('#alert').text("With €"+ txtVal +" we could do that");
});

You can use data attributes for input fields, and data can hold text. Also, to achieve desired functionality, you could set 'flag' which will check if option is selected and 'lock' text (so it will not change on hover). Something like this:
locked=false;
$('input.checkbutton').on('change', function() {
$('#desc').text( $(this).data('text') );
if($(this).prop('checked')) {
locked=true;
}
else {
locked=false;
}
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false);
});
$(".checkbutton").change(function() {
if($(this).is(":checked")) {
$(".textBox").val("");
}
});
default_text="Choose below the amount of your donation";
$( 'label').hover(
function() {
if(!locked)
$('#desc').text( $(this).children().data('text') );
}, function() {
if(!locked)
$('#desc').text( default_text );
}
);
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {-moz-appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow:none;
box-shadow:inset 0 0 4px 0 #000;
-moz-box-shadow:inset 0 0 4px 0 #000;
-wevkit-box-shadow:inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-moz-box-sizing: border-box; /* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="desc">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label><input type="checkbox" name="amount" class="checkbutton" value="5,00" data-text="With 5 euros we can..."><span>€05.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="10,00" data-text="With 10 euros we can..."><span>€10.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="15,00" data-text="With 15 euros we can..."><span>€15.00</span></label>
<label><input type="checkbox" name="amount" class="checkbutton" value="20,00" data-text="With 20 euros we can..."><span>€20.00</span></label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;"/>
<input class="donation-button" type="submit" value="Send Donation">
</form>
P.S. If i didn't understand your requirements, and you want text changing on hover, even when option is selected, you can just remove locked var...
EDIT: I think it is perfect now: https://jsfiddle.net/y05uzdzc/ based on your description.

When I run into stuff like this, I pick or create a way to easily distinguish one input from the others.
Unique ID's make it quick, and easy to find. In this example, your 5 Euro donation would get the ID of donation-5.
$("body").on("mouseover", "input", function () {
if ($(this).attr("id") === "donation-5") {
// --> DO your hover thing.
} else if (so forth and so on...){
// .....
}
})
Also, I'd consider using HTML5 button tags.
Ah yes... Nearly forgot, you want to monitor two event types
You'll need two 'event listeners':
The one I listed above, as well as the one that follows:
$("body").on("click", "input", function () {
if ($(this).attr("id") === "donation-5") {
// --> DO your hover thing.
} else if (so forth and so on...){
// .....
}
})

First, I think you want radio buttons instead of checkboxes. Once you make that change, I would just capture the change and hover events.
On change, you can always update your message. On hover, see if any of the items are checked, if so, leave the message, otherwise you can change it.
Here's a running example:
$(".donation").hover(function() {
let checkCount = $("form .donation :checked").length;
if (checkCount == 0) {
setMessage(this);
}
}).change(function() {
setMessage(this);
});
function setMessage(item) {
var text = $(item).text();
$("#message").text("Thanks for pledge of " + text);
}
body {
box-sizing: border-box;
padding: 50px;
font-family: sans-serif;
font-size: 18px;
text-align: center;
}
label {
margin: 1%;
float: left;
background: #ccc;
text-align: center;
width: 18%;
}
label:hover {
background: grey;
color: #fff;
}
label span {
text-align: center;
box-sizing: border-box;
padding: 10px 0;
display: block;
}
label input {
display: none;
left: 0;
top: -10px;
}
input:checked + span {
background-color: black;
color: #fff;
}
/* Hide HTML5 Up and Down arrows in input type="number" */
input[type=number] {
-moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.textBox {
margin: 1%;
float: left;
background: #ccc;
border: 0;
padding: 10px 0;
text-align: center;
font-family: sans-serif;
font-size: 18px;
width: 18%;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.textBox:focus {
box-shadow: none;
box-shadow: inset 0 0 4px 0 #000;
-moz-box-shadow: inset 0 0 4px 0 #000;
-wevkit-box-shadow: inset 0 0 4px 0 #000;
}
.donation-button {
width: 98%;
margin: 1%;
border: 0;
background: grey;
color: white;
text-align: center;
font-family: sans-serif;
font-size: 18px;
padding: 10px 0 10px 0;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For all Gecko based browsers */
box-sizing: border-box;
}
.donation-button:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="message">Choose below the amount of your donation</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="5,00"><span>€05.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="10,00"><span>€10.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="15,00"><span>€15.00</span>
</label>
<label class="donation">
<input type="radio" name="amount" class="checkbutton" value="20,00"><span>€20.00</span>
</label>
<input type="number" class="textBox" name="amount" placeholder="€ Other">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br style="clear: both;" />
<input class="donation-button" type="submit" value="Send Donation">
</form>

First of all, do not trust that clicking is the only of way of selecting a checkbox. An user can very well tab his way to it and spacebar its change.
Secondly, the behavior you want is radio button, not checkboxes.
This is how I'd do it:
HTML
<p id="myTextIdentifier">Choose below the amount of your donation</p>
... <!- Hidden for brevity ->
<label><input type="radio" name="amount" data-message="Value is 5 message" value="5,00"><span>€05.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 10 message" value="10,00"><span>€10.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 15 message" value="15,00"><span>€15.00</span></label>
<label><input type="radio" name="amount" data-message="Value is 20 message" value="20,00"><span>€20.00</span></label>
<input type="number" name="amount" data-message="Other value message" placeholder="€ Other">
JavaScript
$('#otherValueIdentifier')
.focus(function() {
$(':radio').prop('checked', false);
})
.change(function() {
changeText($(this).val().length
? $(this).data('message')
: '');
});
$(':radio').change(function() {
changeText($(this).is(':checked')
? $(this).data('message')
: '');
});
// Please keep in mind that this has a few flaws, I'll revise it later
$('[data-message]').hover(function () {
// this is the mouseEnter function
changeText($(this).data('message'));
}, function() {
// this is the mouseLeave function
changeText($('[data-message]:checked').data('message'));
});
function changeText(text) {
$('#myTextIdentifier').val(text || 'Default message');
}

Html/Javascript/Css how to check if inputs are empty [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have 6 different input-fields and I want to do so you have to fill in all of them, else a alert message will pop-up. Any tips on how to do this?
I also have problems with option for different font-styles. When you click on the different options for the font-style, the text that you wrote in the input-filed should change and also the text infront "förtag" and so on.
This is my code:
function SkrivUt() {
var el = document.getElementById('f');
el.style.color = document.getElementById('textColor').value;
el.style.fontStyle = document.getElementById('selectedFont').value;
el.style.backgroundColor = document.getElementById('backGroundColour').value;
$("#area1").html($("#foretagText").val());
$("#area2").html($("#efternamnText").val());
$("#area3").html($("#fornamnNamnText").val());
$("#area4").html($("#titleText").val());
$("#area5").html($("#telefonText").val());
$("#area6").html($("#epostText").val());
$("#visitkort").hide();
$("#visitkortsDemo").show();
}
function reset() {
document.getElementById('foretagText').value = "";
document.getElementById('efternamnText').value = "";
document.getElementById('fornamnNamnText').value = "";
document.getElementById('titleText').value = "";
document.getElementById('telefonText').value = "";
document.getElementById('epostText').value = "";
}
.form-style-3 {
max-width: 400px;
max-height 400px;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.form-style-3 label {
display: block;
margin-bottom: 10px;
}
.form-style-3 label span {
float: left;
width: 150px;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: lightblue;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
/*Format legent inom ett fieldset*/
.form-style-3 fieldset legend {
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow: -0px -1px 2px #F1F1F1;
-webkit-box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.select-field {
background: gray;
color: white;
border-radius: 5px 5px 5px 5px;
}
.input-field {
font-family: "Comic Sans MS", cursive, sans-serif;
color: red
}
<!DOCTYPE html>
<html>
<head>
<title>Visitkort</title>
<link rel='stylesheet' type='text/css' href='Style.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="form-style-3">
<div id="visitkort" style='display:block'>
<fieldset>
<legend>Visitkort</legend>
<label><span>Företaget</span>
<input type="text" id="foretagText" />
</label>
<label><span>Efternamn </span>
<input type="text" id="efternamnText" />
</label>
<label><span>Förnamn </span>
<input type="text" id="fornamnNamnText" />
</label>
<label><span>Titel </span>
<input type="text" id="titleText" />
</label>
<label><span>Telefon </span>
<input type="text" id="telefonText" />
</label>
<label><span>Epost </span>
<input type="text" id="epostText" />
</label>
<label>
<span>Välj bakgrundsfärg</span>
<select class="select-field" id="backGroundColour">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select>
</label>
<label>
<span>Välj Textfärg</span>
<select class="select-field" id="textColor">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">Gul</option>
<option value="Crimson">röd</option>
</select>
</label>
<label>
<span>Välj typsnitt</span>
<select class="select-field" id="selectedFont">
<option value="Verdana">Verdana</option>
<option value="Ariel">Ariel</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
</select>
</label>
<label><span><button type="button" onclick="reset()">Nollställ</button></span><span><button type="button" onclick="SkrivUt()">Skriv ut</button></span>
</label>
</fieldset>
</div>
<div id="visitkortsDemo" style='display:none'>
<fieldset id="f">
<legend>Förgranskning av visitkort</legend>
n>Företaget </span>
<p id="area1"></p>
</label>
<label><span>Efternamn </span>
<p id="area2"></p>
</label>
<label><span>Förnamn </span>
<p id="area3"></p>
</label>
<label><span>Titel </span>
<p id="area4"></p>
</label>
<label><span>Telefon </span>
<p id="area5"></p>
</label>
<label><span>Epost </span>
<p id="area6"></p>
</label>
</fieldset>
</div>
</div>
</body>
</html>

A simple and quick way would be to use HTML5's required attribute!
Example:
<input type="text" id="foretagText" required />
This will produce browser alerts, when an input field is empty. No need for difficult custom Javascript.

You haven't tried much, so im not just going to give answer, but here is an idea, in raw javascript. You will want a better way of collecting the input Ids obviously, thats up to you.
<script>
var inputs = ["inputid1", "inputid2", "inputid3"];
var notFilled = "";
for (var i in inputs){
element = document.getElementById(i);
if(element.value==""){
notFilled = i;
break;
}
}
if(notFilled!=""){
alert("you must fill" + notFilled);
}
</script>

// create your err array
var err = [];
//test if values are a blank string
if($("#foretagText").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
// be sure you only have if statements and they aren't nested like this
if($("#idOfNextValue").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
//alert all messages in your error array.
alert (err.length + " Errors:<br>" +err.join("<br>"));//join

In HTML5 you can use required attribute as follow;
<input type="text" required>
Or in jQuery:
Let's say HTML:
<input type="text" id="input-1">
<input type="text" id="input-2">
<input type="text" id="input-3">
<input type="text" id="input-4">
and so on..
Now jQuery
if($("[id^=input]").val()=="")
{
alert("error");
return;
}

HTML way : Use required attribute
<input type="text" id="somename" required>
Javascript way:
if ($('#foretagText').val() == '' || $('#efternamnText').val() != ' ...) {
alert("Fields empty");
}

For your first question. To require the user to select a value in a select you have to add the atributte required like this
<select class="select-field" id="backGroundColour" required>
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select></label>
For your second question I'm not completely sure about this but I think that the problem resides in that you are trying to change the label style directly without change the associated css.

Having trouble with my javascript

I'm trying to set up a part of a website so as when you enter certain information in an input and click a button, it changes the text in a div. After this I want to submit the info as a form but I know how to do this and that part of it should be okay.
HTML;
<div class="inner">
<div class="myDiv"><input placeholder="Exam name" type="text" id="myString" name="Title"></div>
<p><input type="radio" id="lc" name="Level" value"lc"=""> Option 1<br>
<input type="radio" name="Level" value"jc"="" id="jc"> Option 2 </p>
<div style="text-align:center;padding-top:10px;"><!--[x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"]Next[/x_button]--> <button id="myButton">Button</button></div>
</div>
<div class="inner">
<span id="mySpan"><em>When you select an exam title, your subjects will appear here</em></span>
</div>
<div class="inner">
<span id="myOtherSpan"><em>When you select a subject, your topics will appear here</em></span>
</div>
CSS;
.inner {
padding: 10px 15px;
border-top: 1px solid #ddd;
border-top: 1px solid rgba(0,0,0,0.15);
background-color: #fff;
box-shadow: none;
}
#myString {
display: block;
margin : 0 auto;
width:125px;
}
.myDiv {
padding: 0px 0px 10px 0px;
}
.myButton {
padding:100px 0px 0px 0px;
}
Javascript;
document.getElementById('myButtonYo').onclick = function () {
//set var equal to exam name
var mystring = document.getElementById('myString').value;
//if lc check and exam name isn't empty
if(document.getElementById('lc').checked && mystring.trim().length() > 0) {
var lcsubjectText = "test";
document.getElementById('mySpan').innerHTML = lcsubjectText;
}
//if jc check and exam name isn't empty
else if (document.getElementById('jc').checked && mystring.trim().length() > 0){
var jcsubjectText = "test";
document.getElementById('mySpan').innerHTML = jcsubjectText;
}
//if exam name is empty
else if (mystring.trim().length() == 0){
alert ("Please enter an exam name");
}
else {
alert ("Please choose either Option 1 or Option 2");
}
}
http://codepen.io/anon/pen/YyvaRy

Here's the updated code.
document.getElementById('myButton').onclick = function() {
//set var equal to exam name
var mystring = document.getElementById('myString').value;
//if lc check and exam name isn't empty
if (document.getElementById('lc').checked && mystring.trim().length > 0) {
var lcsubjectText = "test";
document.getElementById('mySpan').innerHTML = lcsubjectText;
}
//if jc check and exam name isn't empty
else if (document.getElementById('jc').checked && mystring.trim().length > 0) {
var jcsubjectText = "test";
document.getElementById('mySpan').innerHTML = jcsubjectText;
}
//if exam name is empty
else if (mystring.trim().length == 0) {
alert("Please enter an exam name");
} else {
alert("Please choose either Option 1 or Option 2");
}
}
.inner {
padding: 10px 15px;
border-top: 1px solid #ddd;
border-top: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
box-shadow: none;
}
#myString {
display: block;
margin: 0 auto;
width: 125px;
}
.myDiv {
padding: 0px 0px 10px 0px;
}
.myButton {
padding: 100px 0px 0px 0px;
}
<div class="inner">
<div class="myDiv">
<input placeholder="Exam name" type="text" id="myString" name="Title">
</div>
<p>
<input type="radio" id="lc" name="Level" value "lc"="">Option 1
<br>
<input type="radio" name="Level" value "jc"="" id="jc">Option 2</p>
<div style="text-align:center;padding-top:10px;">
<!--[x_button shape="rounded" size="small" float="none" title="nextButton" info="none" info_place="top" info_trigger="hover" id="myButtonYo"]Next[/x_button]-->
<button id="myButton">Button</button>
</div>
</div>
<div class="inner">
<span id="mySpan"><em>When you select an exam title, your subjects will appear here</em></span>
</div>
<div class="inner">
<span id="myOtherSpan"><em>When you select a subject, your topics will appear here</em></span>
</div>

How to show validation message below each textbox using jQuery?

I am trying to make a login form in which I have email address and password as the textbox. I have done the validation on the email address part so that it should have proper email address and also on the empty check both for email address and password text box.
Here is my jsfiddle.
As of now, I have added an alert box saying, Invalid if email address and password textbox is empty. Instead of that, I would like to show a simple message just below each text box saying , please enter your email address or password if they are empty?
Just like it has been done here on sitepoint blog.
Is this possible to do in my current HTML form?
Update:-
<body>
<div id="login">
<h2>
<span class="fontawesome-lock"></span>Sign In
</h2>
<form action="login" method="POST">
<fieldset>
<p>
<label for="email">E-mail address</label>
</p>
<p>
<input type="email" id="email" name="email">
</p>
<p>
<label for="password">Password</label>
</p>
<p>
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="Sign In">
</p>
</fieldset>
</form>
</div>
<!-- end login -->
</body>
And my JS -
<script>
$(document).ready(function() {
$('form').on('submit', function (e) {
e.preventDefault();
if (!$('#email').val()) {
if ($("#email").parent().next(".validation").length == 0) // only add if not added
{
$("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
}
} else {
$("#email").parent().next(".validation").remove(); // remove it
}
if (!$('#password').val()) {
if ($("#password").parent().next(".validation").length == 0) // only add if not added
{
$("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
}
} else {
$("#password").parent().next(".validation").remove(); // remove it
}
});
});
</script>
I am working with JSP and Servlets so as soon as I click Sign In button, it was taking me to another page with valid email and password earlier but now nothing is happening after I click Sign In button with valid email and password.
Any thoughts what could be wrong?

You could put static elements after the fields and show them, or you could inject the validation message dynamically. See the below example for how to inject dynamically.
This example also follows the best practice of setting focus to the blank field so user can easily correct the issue.
Note that you could easily genericize this to work with any label & field (for required fields anyway), instead of my example which specifically codes each validation.
Your fiddle is updated, see here: jsfiddle
The code:
$('form').on('submit', function (e) {
var focusSet = false;
if (!$('#email').val()) {
if ($("#email").parent().next(".validation").length == 0) // only add if not added
{
$("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
}
e.preventDefault(); // prevent form from POST to server
$('#email').focus();
focusSet = true;
} else {
$("#email").parent().next(".validation").remove(); // remove it
}
if (!$('#password').val()) {
if ($("#password").parent().next(".validation").length == 0) // only add if not added
{
$("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
}
e.preventDefault(); // prevent form from POST to server
if (!focusSet) {
$("#password").focus();
}
} else {
$("#password").parent().next(".validation").remove(); // remove it
}
});
The CSS:
.validation
{
color: red;
margin-bottom: 20px;
}

The way I would do it is to create paragraph tags where you want your error messages with the same class and show them when the data is invalid. Here is my fiddle
if ($('#email').val() == '' || !$('#password').val() == '') {
$('.loginError').show();
return false;
}
I also added the paragraph tags below the email and password inputs
<p class="loginError" style="display:none;">please enter your email address or password.</p>

Here you go:
JS:
$('form').on('submit', function (e) {
e.preventDefault();
if (!$('#email').val())
$('#email').parent().append('<span class="error">Please enter your email address.</span>');
if(!$('#password').val())
$('#password').parent().append('<span class="error">Please enter your password.</span>');
});
CSS:
#charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
#import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
#import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #C0C0C0;
color: #000;
font-family: "Varela Round", Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
-webkit-appearance: none;
}
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 400px;
}
#login h2 {
background-color: #f95252;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
color: #fff;
font-size: 28px;
padding: 20px 26px;
}
#login h2 span[class*="fontawesome-"] {
margin-right: 14px;
}
#login fieldset {
background-color: #fff;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
border-radius: 0 0 20px 20px;
padding: 20px 26px;
}
#login fieldset div {
color: #777;
margin-bottom: 14px;
}
#login fieldset p:last-child {
margin-bottom: 0;
}
#login fieldset input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#login fieldset .error {
display: block;
color: #FF1000;
font-size: 12px;
}
}
#login fieldset input[type="email"], #login fieldset input[type="password"] {
background-color: #eee;
color: #777;
padding: 4px 10px;
width: 328px;
}
#login fieldset input[type="submit"] {
background-color: #33cc77;
color: #fff;
display: block;
margin: 0 auto;
padding: 4px 0;
width: 100px;
}
#login fieldset input[type="submit"]:hover {
background-color: #28ad63;
}
HTML:
<div id="login">
<h2><span class="fontawesome-lock"></span>Sign In</h2>
<form action="javascript:void(0);" method="POST">
<fieldset>
<div><label for="email">E-mail address</label></div>
<div><input type="email" id="email" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" id="password" /></div> <!-- JS because of IE support; better: placeholder="Email" -->
<div><input type="submit" value="Sign In"></div>
</fieldset>
</form>
And the fiddle: jsfiddle

is only the matter of finding the dom where you want to insert the the text.
DEMO jsfiddle
$().text();

This is the simple solution may work for you.
Check this solution
$('form').on('submit', function (e) {
e.preventDefault();
var emailBox=$("#email");
var passBox=$("#password");
if (!emailBox.val() || !passBox.val()) {
$(".validationText").text("Please Enter Value").show();
}
else if(!IsEmail(emailBox.val()))
{
emailBox.prev().text("Invalid E-mail").show();
}
$("input#email, input#password").focus(function(){
$(this).prev(".validationText").hide();
});});

We will use the jQuery Validation Plugin
we have to include the necessary files in our project. There are two different files to include. The first is the core file, which includes the core features of the plugin, including everything from different validation methods to some custom selectors. The second file contains additional methods to validate inputs like credit card numbers and US-based phone numbers.
You can add these files to your projects via package managers like Bower or NPM.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
HTML
<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
CSS
body {
margin: 20px 0;
font-family: 'Lato';
font-weight: 300;
font-size: 1.25rem;
width: 300px;
}
form, p {
margin: 20px;
}
p.note {
font-size: 1rem;
color: red;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
font-family: 'Lato';
width: 300px;
margin-top: 10px;
}
label {
width: 300px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
}
label span {
font-size: 1rem;
}
label.error {
color: red;
font-size: 1rem;
display: block;
margin-top: 5px;
}
input.error {
border: 1px dashed red;
font-weight: 300;
color: red;
}
[type="submit"], [type="reset"], button, html [type="button"] {
margin-left: 0;
border-radius: 0;
background: black;
color: white;
border: none;
font-weight: 300;
padding: 10px 0;
line-height: 1;
}
Java script
$(document).ready(function() {
$("#basic-form").validate();
});
This is based on the assumption that you have already added the required JavaScript files. Adding those lines of JavaScript will make sure that your form is properly validated and shows all the error messages.

We Keep Coding

JavaScript is the programming language of the Web.

Javascript Alert Box with Radio Button - javascript

There is just a simple problem here, on the first line of your function, you have your querySelector mapped out correctly, but the :checked needs a space before it to work. Like so: var option = document.querySelector('input[name = "question1"] :checked').value;

Related

CSS styling my page, sorry guys im a noob

How to swap text both on hover and onclick

Html/Javascript/Css how to check if inputs are empty [closed]

Having trouble with my javascript

How to show validation message below each textbox using jQuery?

Categories

Resources