Here is the following code which is not working to show error message when submitted.
The problem is that the error message is not displayed properly when clicked once but if you give multiple clicks it works.
Help will be appreciated.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript form validation - checking all letters</title>
<style type="text/css">
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Name and Submit</h2>
<form name="form1" action="#">
<ul>
<li>
Code:
</li>
<li id="myList">
<input type='text' name='text1'/>
<p id="error"></p>
</li>
<li class="rq">
*Enter alphabets only.
</li>
<li> </li>
<li>
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
</li>
<li> </li>
</ul>
</form>
</div>
<script type="text/javascript">
function allLetter(inputtxt) {
var letters = /^[A-Za-z]+$/;
if(inputtxt.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
</script>
</body>
</html>
Your problem and solution is quite simple.
When you click the form button, the form automatically submits itself and that's why you see nothing.
Add this to your button code so you can prevent the default functionality of the submit input:
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />
That should solve it:
You should to use event.preventDefault method to prevent the page refresh.
So, your function should look like this:
function allLetter(event) {
event.preventDefault();
var letters = /^[A-Za-z]+$/;
if (document.form1.text1.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
//return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
It should be called in the following way:
<input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />
Related
This question already has answers here:
How do I make an HTML button not reload the page
(10 answers)
Closed 1 year ago.
I try to hide an Fieldset initially and then show it with an button click.
But its just show me the text for a second and then its gone again.
I tried to do it also with visibility attribute but I got the same problem.
Is there something I do wrong?
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>
You forgot to close <form> tag.
Another thing, You've set button inside a form element which works as a submit button by default. You've to provide the type="button" to prevent form submission.
Also, Properly put <meta> tags in <head> and style and script tag before and after body respectively.
<!DOCTYPE html>
<html>
<head>
<title>Konfiguration / Configuration</title>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
</style>
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>
</form>
<script>
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
</script>
</body>
</html>
I've tried this code on my pc and it doesn't work, does anyone know why?
There is this paragraph that contains the text CHANGE ME. It contains an id of "warning", now I want to change that text when someone clicks on the login button. It does not work on my pc. What am I doing wrong?
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="submit()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function submit()
{
//toggleWarningText("");
let password = document.GetElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>
Change submit() function name.
It calls form submit() function.
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="clicked()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function clicked()
{
//toggleWarningText("");
let password = document.getElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>
I think you're looking for
function toggleWarningText(text)
{
document.getElementById('warning').value= text;
}
instead of .innerHTML
I have the following jsp:
<head lang="en">
<meta charset="UTF-8">
<title>Data Platform - Real Time Monitor </title>
<script src="../dist/ag-grid-enterprise.js?ignore=notused30"></script>
<script src="../dist/loadingGrid.js"></script>
<script src="../dist/sortGrid.js"></script>
<style type="text/css">
#popupbox{
margin: 0;
margin-left: 40%;
margin-right: 40%;
margin-top: 50px;
padding-top: 10px;
width: 20%;
height: 150px;
position: absolute;
background: #FBFBF0;
border: solid #000000 2px;
z-index: 9;
font-family: arial;
visibility: hidden;
}
</style>
<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>
<body style="height: 100%; margin: 0px;">
<div id="popupbox">
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center>close</center>
</div>
<p>login</p>
<div style="font-style:bold;font-size:30;color:black;"> Data Platform - Monitor
But when I open the jsp, a link "login" appears on top, which on clicking shows a popup box for logging in, however I'm still able to see all the content of the page before logging in. How do I make this popup box appear before loading the content of the page?
Also, I want to set only one username and password and if only that is supplied, page should be displayed. How to get this done?
Your login and close links both have javascript in the href attribute, it should be in onclick attributes instead.
<a onclick="login('show');">login</a>
By having it in the href (or any other attribute that's not associated with an event) the code gets executed. Since your last button is javascript:login('show'); it will always show the login.
Better yet, you should do all the work in your script.
document.getElementById('show-login').addEventListener('click', function(e) {
e.preventDefault(); // cancel the click, but run the following code
login('show');
});
This requires you added an id attribute to your login button.
<a id="show-login">login</a>
I want this button to be absent after it has been clicked and finish activated. The reason I'm trying to make it like this is because, before new page gets loaded if user clicks submit button twice, then two posts are made. I followed this approach, Hide Button After Click (With Existing Form on Page) but this isn't working for me some reason.
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
{% csrf_token %}
{{ form|crispy }}
<input type="submit" id="button" name="submit" value="submit">
</form>
I have input type="submit" I need to hide this once it's clicked.
Set Button's display to none:
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('post_form').addEventListener('submit',function(){
document.getElementById('button').style.display='none';
},false);
},false);
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
<input type="submit" id="button" name="submit" value="submit">
</form>
OR
You can even set button's attribute to disabled:
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('post_form').addEventListener('submit',function(){
document.getElementById('button').setAttribute('disabled','disabled');
},false);
},false);
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
<input type="submit" id="button" name="submit" value="submit">
</form>
EDIT
You can show some waiting message after hiding the submit button:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('post_form').addEventListener('submit', function() {
document.getElementById('button').style.display = 'none';
document.getElementById('wait').style.display = 'block';
}, false);
}, false);
#wait {
display: none;
}
<form id="post_form" method="post" action="/add_post/" enctype="multipart/form-data">
<input type="submit" id="button" name="submit" value="submit">
<p id='wait'>Please Wait..</p>
</form>
this is the easiest way to do it with jquery, I used online jquery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#hideme{
border-radius: 5px;
background-color: orange;
color: black;
border:1px solid black;
font-size: 15px;
text-align: center;
}
</style>
</head>
<body>
<input type="submit" id="hideme" name="submit" value="submit"/>
<script type="text/javascript">
$("#hideme").click(function(){
$(this).hide();
});
</script>
</body>
</html>
or else you can disable it after user click once like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#hideme{
border-radius: 5px;
background-color: orange;
color: black;
border:1px solid black;
font-size: 15px;
text-align: center;
}
</style>
</head>
<body>
<input type="submit" id="hideme" name="submit" value="submit"/>
<script type="text/javascript">
$("#hideme").click(function(){
$(this).css({"opacity":"0.5"}).prop('disabled',true);
});
</script>
</body>
</html>
I have a bootstrap form that I'd like to validate using Javascript by clicking on a link (NOT submit button). Here's my sample code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style>
/* ==========================================================================
Demo using Bootstrap 3.3.4 and jQuery 1.11.2
You don't need any of the following styles for the form to work properly,
these are just helpers for the demo/test page.
========================================================================== */
#wrapper {
width:595px;
margin:0 auto;
}
legend {
margin-top: 20px;
}
#attribution {
font-size:12px;
color:#999;
padding:20px;
margin:20px 0;
border-top:1px solid #ccc;
}
#O_o {
text-align: center;
background: #33577b;
color: #b4c9dd;
border-bottom: 1px solid #294663;
}
#O_o a:link, #O_o a:visited {
color: #b4c9dd;
border-bottom: #b4c9dd;
display: block;
padding: 8px;
text-decoration: none;
}
#O_o a:hover, #O_o a:active {
color: #fff;
border-bottom: #fff;
text-decoration: none;
}
#media only screen and (max-width: 620px), only screen and (max-device-width: 620px) {
#wrapper {
width: 90%;
}
legend {
font-size: 24px;
font-weight: 500;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="<?php echo base_url('scripts/js/validator.min.js'); ?>"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <!-- only added as a smoke test for js conflicts -->
</head>
<body>
<div id="wrapper">
<form data-toggle="validator" role="form" id="form" name="extra" value="me">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<!-- Select Basic -->
<label class="label_ttl control-label" for="title">Title:</label>
<!-- Text input-->
<div class="form-group">
<label class="label_fn control-label" for="first_name">First name:</label>
<input id="first_name" name="first_name" type="text" placeholder="" class="form-control" required>
<p class="help-block">This field is required.</p>
</div>
</div><!-- end #entry1 -->
<!-- Button -->
<p>
Submit
</p>
</fieldset>
</form>
</div> <!-- end wrapper -->
<script>
function myFunction(){
$('#form').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
})
}
</script>
</body>
</html>
Am using this lib for validation
http://1000hz.github.io/bootstrap-validator/#validator-usage
I need 'onclick' to fire up the JS function and run validation which should give me a true(i.e pass) or false(i.e fail).
Note: Am a complete noob in JS and am essentially trying to cobble up this so that it works for me.
You could call a function on click of the link such as:
function myFunction(){
$("#form").submit(function() {
$(this).validator(function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
});
});
}
Source: https://api.jquery.com/submit/
I'd recommend using query validate (http://jqueryvalidation.org). It has lots options and works very well with bootstrap. You can also check fields before submission using valid() method or perform validation using validate() method.
Here is a quick example https://jsfiddle.net/Lu165LLt/1/
<form id="myform" class="container">
<div class="form-group">
<label class="control-label" for="name">Name</label>
<input type="text" name="name" class="form-control" required />
</div>
<a>Validate!</a>
</form>
$.validator.setDefaults({
debug: true,
success: "valid"
});
var form = $("#myform");
form.validate();
$("a").click(function () {
alert("Valid: " + form.valid());
});
Libraries Used:
jQuery,jQuery Validate,Bootstrap