I am trying to make a js form validation check but for some reasons nothing is happening when im writing the function here's the code so when my email value is "" its supposed to display the alert message but its not displaying:
<form onsubmit="checkForm()" method="post">
<input class="test" type="text" minlength="1" maxlength="10" name="firstname" placeholder="➡️ Write Your First
Name"></input>
<input class="test" type="text" name="lastname" placeholder="😊 Write your Last Name"></input>
<input class="test" id="email" type="email" name="email" placeholder="✉️ Write your Best Email"></input>
<!--<textarea class="test" type="text" name="comment" placeholder="Tell us more about yourself"></textarea>-->
<script>
function checkForm(form) {
const getEmailValue = document.getElementById(email);
if (getEmailValue === "") {
alert('you need to fullfill');
}
}
</script>
<div id="buttoncenter">
<button type="submit" class="button">SUBMIT</button>
You need to quote the argument to getElementById, and get the value property.
The validation function should also return false when the form shouldn't be submitted, and you need to use a return statement in onsubmit so that this will be used.
function checkForm(form) {
const getEmailValue = document.getElementById('email').value;
if (getEmailValue === "") {
alert('you need to fullfill');
return false;
}
}
<form onsubmit="return checkForm()" method="post">
<input class="test" type="text" minlength="1" maxlength="10" name="firstname" placeholder="➡️ Write Your First
Name"></input>
<input class="test" type="text" name="lastname" placeholder="😊 Write your Last Name"></input>
<input class="test" id="email" type="email" name="email" placeholder="✉️ Write your Best Email"></input>
<input type="submit">
</form>
Related
How to select input:empty and input:not(:empty) value after click on submit button and add following conditions:
If value is empty, after click change background color.
(It's not working as you can see in the input Text3)
If value is not empty, after click add these three conditions:
(It's not working in my sample code)
• {cursor: not-allowed;}
• readonly
• Change Background color
Here is my sample code:
$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").style.cursor = "not-allowed";
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
Here is a slightly modified version of your code. First select all the input tags with type of text then see if their length is 0 or not on this apply what you want to it.
$(".signupbtn").on('click', function() {
$('input:text').each(function(){
if($(this).val().length == 0 ){
$(this).css("background", "red");
}else{
$(this).val("Successfully Received!");
$(this).css("background", "green");
$(this).css("cursor","not-allowed");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
$(".signupbtn").on('click', function() {
$("input").filter(function() {
return this.value.length !== 0;
}).val("Successfully Received!");
$("input:empty")
.css("background", "rgb(255,220,200)");
$("input:not(:empty)").css("cursor","not-allowed");
$("input:not(:empty)")
.css("background", "rgb(220,20,60)");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" onsubmit="return false;">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="">
<input class="form-control" type="text" placeholder="" name="firstname" value="sss">
<button type="submit" class="signupbtn">Sign Up</button>
</form>
I have a form with two buttons, the first buttons confirms the data entered and shows a verification code input, and the other one submits the code and the form, what i want is to put validations at the first button to required fields so he can't confirm unless he has filled all the required fields, how can i do that using js?
<form>
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm"><br>
<input type="submit" value="Submit">
</form>
I think you are looking for something like this
function validate() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
if(fname==null || fname=="" || lname==null || lname=="") { // Validate the data here
alert("Please fill all the fields");
}
else {
alert("Data confirmed. Now you can submit.");
document.getElementById("submit").disabled = false;
}
}
<form>
First name:<br>
<input type="text" name="firstname" id="fname"><br>
Last name:<br>
<input type="text" name="lastname" id="lname"><br>
<input type="button" value="Confirm" onclick="validate()"><br>
<input type="submit" value="Submit" id="submit" disabled>
</form>
Use jQuery Validation:
<form id="UserForm">
First name:<br>
<input type="text" name="firstname" required><br>
Last name:<br>
<input type="text" name="lastname" required><br>
<input type="button" value="Confirm" onclick="Validate()"><br>
<input id="submitBtn" type="submit" value="Submit" disabled>
</form>
function Validate() {
var isValid = $("#UserForm").valid();
if (isValid)
$('#submitBtn').prop('disabled', false);
else
$('#submitBtn').prop('disabled', true);
}
You must'n't use JS for validation because you mustn't use client side for this validation. this is evil. Use PHP or a server side to be a litle more secure.
I want to pass in different element IDs with the same function
function validate(idname, spnname) {
var getId = document.getElementById(idname);
if(getId === null || getId === undefined || getId === "") {
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
validate('firstname', 'spnfirstname');
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get" >
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
<input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
//is there another way to do this onClick event in javascript that may help?
<input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
</form>
</div>
I am receiving an error for my second var and my html onClick. My question is different because there is no answer here responding to this issue correctly. I have tried everything. I have no idea why I am getting this error message.
Two things:
1.- Use the 'value' property to get the actual value from the input:
var getId = document.getElementById(idname).value;
2.-Set the function to the 'click' event, addEventListener can be useful if you want to use plain javaScript, just right after the form:
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
This is how i get it work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validate(idname, spnname){
var getId = document.getElementById(idname).value;
console.log(getId);
if(getId === null || getId === undefined || getId === ""){
var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
}
}
</script>
</head>
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
<input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
<span id="spnbirthday"></span><br/>
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
//is there another way to do this onClick event in javascript that may help
<input id ="btn" type="button" value="Submit"/>
</form>
<script>
document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>
</body
</html>
If you are trying to validate all your elements on submit click.
You can select all using querySelector and and then check each element for its value. If value is "" then change the innerHTML of sibling span element.
var submit = document.querySelector("#btn")
submit.addEventListener("click", function() {
var elements = document.querySelectorAll("input");
for (var i = 0; i < elements.length; i++) {
if (elements[i].value === "") {
elements[i].nextElementSibling.innerHTML = "Required Field";
}
}
});
<body>
<h1>SUBSCRIBE</h1>
<form id="frml" method="get">
<input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span>
<br />
<input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span>
<br />
<input type="date" name="Birthday" value="" class="textbox" id="birthday" />
<span id="spnbirthday"></span>
<br />
<input type="email" name="" placeholder="someone#example.com" class="textbox" id="email" /><span id="spnemail"></span>
<br />
<input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span>
<br />
<input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span>
<br />
<input id="btn" type="button" value="Submit" />
</form>
</div>
I have a text field, which i check to make sure the text field is not empty before submission, which work fine.
How do I make sure that it only checks for the id="Name" text field is not empty and ignore the other text field.
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required >
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address">
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" >
JS
$('input:text').val().length;
Target the element by ID,
$('#Name').val().length;
Did you try this?
$('#Name').val().length;
You have set attribute required to the input with ID Name so form won't submit unless it has some value. If you want to check for whitespaces you can use jquery $.trim() method:
$('form').submit(function(e) {
var name = $('#Name').val();
if ($.trim(name) === '') {
e.preventDefault();
return false;
}
console.log('form submited!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" class="form-control" id="Name" aria-label="Name" placeholder="Name" required />
<input type="text" class="form-control" id="address" aria-label="address" placeholder="address" />
<input type="text" class="form-control" id="zip" aria-label="zip" placeholder="zip" />
<input type="submit" value="submit" />
</form>
I have multiple forms in same page with submit , i want to hide the form after form submit and display a link for the respective forms
Below is the html i have the same class name for all the forms
and for the submit class also.
<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
<div id="wpcf7-f63-p1-o2">
<form name="" class="" action="" method = "post">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</form>
</div>
i tried the below code
<script>
jQuery(".wpcf7-form").submit(function()
{
jQuery("^wpcf7-f63-p1-").hide();
});
</script>';
In your example typed:
jQuery("^wpcf7-f63-p1-").hide();
i think should be:
jQuery("#wpcf7-f63-p1-o1").hide();
Use this on form submit
$('input[type="submit"]').click(function() {
$form = $(this).parent();
$('<p>link to form</p>').insertBefore($form);
$form.hide();
});
Are you looking for jquery .find() ?
you could do something like this:
$('form').submit(function(){
$(this).find('.myForm').hide();
$(this).find('.link').show();
}
.link {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post">
<div class="myForm">
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
</div>
<a class="link" href="#">Link</a>
</form>
ah error on your jquery selector, change your js to:
jQuery(".wpcf7-form").submit(function()
{
jQuery("[id^='wpcf7-f63-p1-']").hide()
return false;
});
working jsfiddle code
NB. you may need to delete the return false, I added it to see the elements getting disappeared after submit.