I want to not submit the form if the inputs are empty, here is my code:
<html>
<head>
<title>
The X/O Game
</title>
<script type="text/javascript">
var check = function () {
var x = document.getElementById("x").value;
var o = document.getElementById("o").value;
var p = document.getElementById("p").value;
if(p==""||(x==""&&o=="")){
alert("fill the form!");
return false;
}
return true;
};
$('#formm').submit(function(e){
var shouldSubmit = check();
if (!shouldSubmit) {
e.preventDefault();
}
});
$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
</script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<body>
<div>
Please enter your name & choose your character before start playing:
</div>
<div>
<form method=post action=game.php name="formm">
Name:<br>
<input type=text name=player id=p>
</div>
<div>
Character:<br>
<input
type="radio" name="emotion" value="xChar"
id="x" class="input-hidden" />
<label for="x">
<img src="images/x.png " />
</label>
<input
type="radio" name="emotion" value="oChar"
id="o" class="input-hidden" />
<label for="o">
<img src="images/o.png" />
</label>
</div>
<div>
<input type=submit value=Play>
</form>
</div>
</body>
</html>
$('#formm').submit(function(){
return f;
});
this function is called when the user clicks on the submit button.
the form is subbmited even though the inputs are empty, where is the wrong?
f is defined when you call check(), they will not magically update. Do the checks inside the submit function.
You'd better use HTML5 required attribute here:
<form>
<input type="text" name="x" required>
<input type="submit">
</form>
If you want more complex validation, you should have a look at html5rocks.com. The form validation should move from Javascript to HTML now (or in the near future).
But if you want to do it your way, do as epascarello suggests here:
$('#formm').submit(function(){
check();
return f;
});
Try this:
$('#yoursubmitbtnid').click(function(){
var x = document.getElementById("x").value;
var o = document.getElementById("o").value;
var p = document.getElementById("p").value;
if(p==""||(x=="" && o=="")){
alert("fill the form!");
return false;
}
});
You need to run the check function in the submit handler to determine whether or not the submit should be allowed.
var check = function () {
var x = document.getElementById("x").value;
var o = document.getElementById("o").value;
var p = document.getElementById("p").value;
if(p==""||(x==""&&o=="")){
alert("fill the form!");
return false;
}
return true;
};
$('#formm').submit(function(e){
var shouldSubmit = check();
if (!shouldSubmit) {
e.preventDefault();
}
});
You may want to look into using a validation plugin (such as this) if you plan on doing any extensive client side validation.
You need to call the check function when the form is being submitted
$('#formm').submit(function(){
return check();
});
If the check function returns false then the form should not submit.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Checklist</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Checklist</h1>
<form onsubmit="return isChecked()">
<div class="workout>">
<input type="checkbox" id="workout" name="todo1" value="workout">workout</input>
</div>
<div class="meeting">
<input type="checkbox" id="meeting" name="todo2" value="meeting">meeting</input>
</div>
<div class="lunch">
<input type="checkbox" id="lunch" name="todo3" value="lunch">lunch</input>
</div>
<div class="school">
<input type="checkbox" id="school" name="todo4" value="school">class</input>
</div>
<div>
<input class="submit" id="submit" type="submit" value="Submit"
onchange="document.getElementById('formName').submit()">
</div>
<!--<p id="msg"></p> (I tried using this approach and calling the msg within script but I received an error.)-->
</form>
</div>
</body>
<script>
function isChecked() {
var workout = document.getElementById('workout').checked;
var meeting = document.getElementById('meeting').checked;
var lunch = document.getElementById('lunch').checked;
var school = document.getElementById('school').checked;
var submit = document.getElementById('submit');
var text = document.getElementById('msg');
//My if/else statement alert works perfectly. However, with the presence of const submit, it doesn't work properly (I think it's interfering with my if/else statement). Removing the const submit section allows one to experience the if/else alert statement. The goal of this checklist is to be able to check one or all four checkboxes and have it return the "Enjoy your day" text. However, I would like for that message to cover the screen and be the only thing visible after hitting the submit button. I'm okay with receiving an alert box when it returns false. However, when it returns true, I would like for the message to cover the screen and for the checklist/checkboxes to disappear. I'm not sure where I'm getting my wires crossed.
if (workout == false && meeting == false && lunch == false && school == false) {
alert('Please check a box');
return false;
} else {
return true;
}
const submit = document.getElementById("submit");
submit.addEventListener("click", function (e) {
document.body.innerHTML = "<h1>Enjoy your day.</h1>";
});
}
</script>
</html>
enter image description here
enter image description here
You are declaring submit twice in the isChecked function. Omit one of the declaration.
Also, you are adding the event listener to the submit button after the return statement, which JS will ignore and won't append any onclick function.
The updated isChecked function should be
function isChecked() {
var workout = document.getElementById('workout').checked;
var meeting = document.getElementById('meeting').checked;
var lunch = document.getElementById('lunch').checked;
var school = document.getElementById('school').checked;
// Removed the submit variable
var text = document.getElementById('msg');
if (workout == false && meeting == false && lunch == false && school == false) {
alert('Please check a box');
return false;
}
const submit = document.getElementById("submit");
submit.addEventListener("click", function (e) {
document.body.innerHTML = "<h1>Enjoy your day.</h1>";
});
// Returning true after adding the event listener.
return true;
}
Just display the message since it is being called onsubmit
function isChecked() {
var workout = document.getElementById('workout').checked;
var meeting = document.getElementById('meeting').checked;
var lunch = document.getElementById('lunch').checked;
var school = document.getElementById('school').checked;
if (!workout && !meeting && !lunch && !school) {
alert('Please check a box');
} else {
document.body.innerHTML = "<h1>Enjoy your day.</h1>";
}
return false;
}
<h1>Checklist</h1>
<form onsubmit="return isChecked()">
<div class="workout>">
<input type="checkbox" id="workout" name="todo1" value="workout">workout</input>
</div>
<div class="meeting">
<input type="checkbox" id="meeting" name="todo2" value="meeting">meeting</input>
</div>
<div class="lunch">
<input type="checkbox" id="lunch" name="todo3" value="lunch">lunch</input>
</div>
<div class="school">
<input type="checkbox" id="school" name="todo4" value="school">class</input>
</div>
<div>
<input class="submit" id="submit" type="submit" value="Submit">
</div>
</form>
</div>
I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
I'm trying to validate fields in a form using JavaScript. The fields should be validated either when the user leaves a field (onblur) and when the user presses submit. The form should not be sent if the validation fails in any way on a required field.
The thing is I also have a JS function that if validation succeeds, should rewrite one of the fields that is validated, and send the form.
This is my HTML:
<head>
<meta charset='UTF-8'>
<script type="text/javascript" src="./library/checkcreateuser.js"></script>
<script type="text/javascript" src="./library/hashcreateuser.js"></script>
</head>
<body>
<div class="maindiv">
<form name="createform" id="createform" onsubmit="return formhash();" action="#" method="post">
<input type="text" name="email" id="email" onblur="checkEmail()" placeholder="E-postadress" maxlength="50" />
<label for="email" id="labemail"></label><br />
<input type="text" name="testemail" id="testemail" onblur="checkEmailConfirm()" placeholder="Bekräfta e-postadress" maxlength="50" /><br />
<label for="testemail" id="labtestemail"></label><br />
<br />
... other input fields that should be validated, not yet written ...
<br />
<input type="password" name="password" id="password" placeholder="Lösenord" maxlength="50" /><br />
<label for="password" id="labpassword"></label><br />
<input type="password" name="testpassword" id="testpassword" placeholder="Bekräfta lösenord" maxlength="50" /><br />
<label for="testpassword" id="labtestpassword"></label><br />
<br />
<input type="submit" placeholder="Registrera" onclick="validateForm()"><br />
</form>
</div>
</body>
And this is my javascript for validation:
function checkEmail() {
var validemail = true;
var email = document.getElementById("email");
var divided = email.split("#");
var divlen = divided.length;
if (divlen != 2) {
validemail = false;
document.getElementById("labemail").innerHTML = "Felaktig e-postadress";
} else {
document.getElementById("labemail").innerHTML = "<font color='#00cc00'>Korrekt epostadress</font>";
}
// More code to validate Email to come
return validemail;
}
function checkEmailConfirm() {
var validtestemail = true;
var email = document.getElementById("email");
var testemail = document.getElementById("email");
if (testemail != email) validtestemail = false;
return validtestemail;
}
function validateForm() {
var validform = true;
var returnval = true;
validform = checkEmail();
if (validform == false) returnval = false;
validform = checkEmailConfirm();
if (validform == false) returnval = false;
return returnval;
}
My problem is that nothing happens when i leave the email- or testemail-fields.
My second question is, if I want the form not submitted if any of the validations fails, but submitted and also hashed using the function called formhash() if the validations succeeds, is this the correct way?
EDIT: Using the Chrome debugger, i have the following errors:
Uncaught TypeError: undefined is not a function: checkcreateuser.js:9
checkEmail: checkcreateuser.js:9
onblur: newuser.php:16
to check for the value entered in email and testemail you should use:
var email = document.getElementById("email").value;
var testemail = document.getElementById("testemail").value;// then use split on these values.
if you will use
var email = document.getElementById("email");//you will get error may be like split is not a function or something similar.
Can anyone please help me resolve this conflict with my javascript validation?
The form does not submit. But if I remove onsubmit="return btnSubmitPD_OnClick() it redirect the form correctly. But of course I need that function.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Submit').click(function() {
var emailVal = $('#email').val();
$.post('checkemail.php', {'email' : emailVal}, function(data) {
if(data=='exist') {
alert('in'); return false;
}else{
$('#form1').submit();
}
});
});});
</script>
<script type="text/javascript">
function appIsEmail(str){
var at="#";
var dot=".";
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);
if (str.indexOf(at)==-1) return false;
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr) return false;
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr) return false;
if (str.indexOf(at,(lat+1))!=-1) return false;
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot) return false;
if (str.indexOf(dot,(lat+2))==-1) return false;
if (str.indexOf(" ")!=-1) return false;
return true;
}
function btnSubmitPD_OnClick(){
frmReg = document.getElementById("form1");
if (!appIsEmail(frmReg.email.value)){
alert("Please enter a valid email address!");
frmReg.email.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="view.php" onsubmit="return btnSubmitPD_OnClick()">
<p>
<input type="text" name="email" id="email" />
</p>
<p>
<input type="button" name="Submit" id="Submit" value="Submit" />
</p>
</form>
</body>
</html>
Several Things:
It is better to bind a submit event to your form, rather than a click event on your submit button, this is to cater for cases where users press enter on the email text field:
$('#form1').submit(function() { // change from $('#Submit').click
Then inside the new submit handler, you call call the email validation method:
var emailVal = $('#email').val();
if(btnSubmitPD_OnClick() === false) return false;
Then, to avoid infinite submit loop, you need to change:
else{
$('#form1').submit();
}
to
else{
$('#form1')[0].submit(); // native submit on form element
}
Or as mplungjan noted in his comment, simply change your
<input type="button" name="Submit" id="Submit" value="Submit" />
To use type="submit"
<input type="submit" name="Submit" id="Submit" value="Submit" />
And add
if(btnSubmitPD_OnClick() === false) return false;
Before your call to $.post
I added a stylish alert box to my page, resource is here . But problem is after clicking ok, confirmsubmit.jsp is not opening. Also in that alert cancel button is not appearing why?
javascript
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = csscody.alert("Confirm submit?")// added csscody here for alert but after clicking ok nothing happens
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;// here cancel button is not coming
}
}
//-->
</script>
</form>
html
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
UPDATE
View below code ,it uses button instead of link
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "si o no compa?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
<input type="text" name="textboxname"/>
<input type="submit" id="btn_submit" onclick="return confirmation()"/>
</form>
You willl have to use confirm instead of alert which will giv eyou both ok and cancel buttons which return true and false respectively. And also take off return from onclick
HTML
<form action = "confirmsubmit.jsp" method = "POST">
<input type = "text" name = "textboxname" />
<input type = "submit" onclick = "confirmation();" />
</form>
Javascript
function confirmation() {
var answer = confirm("Confirm submit?");
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
}