Javascript form validation alert - javascript

Here is the HTML
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit"/>
The javascript
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
What I am trying to do is get the thank you alert to show only if all fields are filled out. Currently, the form catches the missing input but still alerts the thank you message.

Please try this :
function IsEmpty() {
if (document.forms['form'].name.value == "") {
alert("empty");
return false;
}
alert('Thank You, Your order is being processed');
return true;
}
DEMO

Try this
function IsEmpty(){
if(document.forms['form'].name.value == "")
{
alert("empty");
return false;
}
if(document.forms['form'].name.value != ""){
alert('Thank You, Your order is being processed');
return true;
}
}
<form name="form" action="">
<input name="name" />
<input class="btn" onClick="return IsEmpty()" type="submit" name='submit' value="submit" />
</form>

Related

Unlocking button when the correct answer is filled in

So, I am making something where the user has to fill in their username and password in the beginning and in the end they can submit their score. I want the button to be disabled when the wrong data is filled in and to enable the button when the correct data is filled in. I cant get it to work. I have the name and password stored in the localStorage.
HTML
<button id="submit" class="register_button" type="submit" value="submit">Submit</button>
JavaScript
if (document.getElementById('name2') == localStorage.getItem('name') && document.getElementById('password2') == localStorage.getItem('password')) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
};
your expression is wrong you need to add .value after document.getElementById('name2') you are comparing the whole element not it's value
below is the working example
<input type="text" name="" id="name2">
<input type="text" name="" id="password2" onkeydown="validateData();">
<button id="submit" class="register_button" disabled type="submit" value="submit">Submit</button>
<script>
localStorage.setItem('name', "fazal")
localStorage.setItem('password', "pwd")
function validateData() {
//alert(document.getElementById('name2').value);
if (document.getElementById('name2').value == localStorage.getItem('name') && document.getElementById('password2').value == localStorage.getItem('password')) {
document.getElementById("submit").disabled = false;
} else {
document.getElementById("submit").disabled = true;
};
}
</script>

How to validate input file type onclick submit using jquery?

In this code I simply want to validate pancard_img. What happens right now if pancard image not empty then it again shows me 'Pancard image should not be empty. If pancard_img have a value. How can I fix this one?
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
if (("#pancard").val() == '') {
$("#err_pan").html("Pancard should not be empty");
} else if (("#pancard_img").val() == '') {
$("#err_pan_img").html("Pancard image should not be empty");
} else {
alert("successful");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="text" name="pancard" id="pancard" />
<div id="err_pan"></div>
<input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" />
<div id="err_pan_img"></div>
<input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" />
</form>
There are few Syntactical mistakes in your code like,
$(document).ready(function() {
$("#submit").click(function(e) {
e.preventDefault();
if ($("#pancard").val() == '') { // add $
$("#err_pan").html("Pancard image should not be empty");
} else if($("#pancard_img").val() == '') { // add $
$("#err_pan_img").html("Pancard image should not be empty");
} else {
alert("successful"); // You can use alert, echo is for php
}
});
});
Remove the echo from the submit handler and move the e.preventDefault() inside the conditions, so that it doesn't block the form from submitting, when the input has value.
Also you forgot to use $ when selecting the element.
$(document).ready(function() {
$("#submit").click(function(e) {
if ($("#pancard").val() == '') {
e.preventDefault();
$("#err_pan").html("Pancard image should not be empty");
} else if ($("#pancard_img").val() == '') {
e.preventDefault();
$("#err_pan_img").html("Pancard image should not be empty");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<input type="text" name="pancard" id="pancard" />
<div id="err_pan"></div>
<input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" />
<div id="err_pan_img"></div>
<input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" />
</form>

Why this form is still submitting?

I am really tired of this form i was trying to prevent it from submitting for a time that i can not remember!
I am trying to prevent the form from submitting if the validation is not true, I believe that it's submitting when it is looking for file codes.txt
Please anyone tell me how can i submit it only after my validations are correct?
Help me stack overflow! you are my last hope.
$('form').submit(function() {
var errors = 0;
$("form input[required]").map(function(){
if( !$(this).val() ) {
errors++;
}
});
$("form textarea[required]").map(function(){
if( !$(this).val() ) {
errors++;
}
});
if(errors > 0){
alert("You must fill out the required fields");
return false;
}
if(!$('#terms-checkbox').is(':checked')) {
alert('You must accept the terms and conditions');
return false;
} else {
if ($.trim($('#code').val()).length == 0){
alert("You must enter code");
} else {
$.get('codes.txt', function (contents) {
if (contents.includes($('#code').val())) {
validForm =true;
} else {
alert("Sorry!! That is not a valid code.");
return false;
}
});
}
}
});
<script type="text/javascript">var validForm=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(validForm) {window.location='confirmation-page.html'}"></iframe>
<form action="https://docs.google.com/forms/d/e/1FAIpQLSdC9Jr65fCIhRLiSXzVRoDKJAB8was3LoyN0DaCVrVLRa-nJg/formResponse" target="hidden_iframe" method="post">
<!--Some Inputs goes here-->
<input id="terms-checkbox" type="checkbox" name="aaaa" value="Bike"> <span style="color: red;font-size: 14px;">*</span> I have read and agree to the above terms and conditions
<input type="submit" value="Send" class="form-control btn-default" >
</form>

Javascript Function is not Called onclick() and onsubmit()

Can anyone tell me why below javascript functions are not calling while clicking the button or submitting the form.
I am not getting wht is the wrong with this code. Please help
<script type="text/javascript">
function confrm()
{
alert("check1");
if(confirm("Are you going to submit this form?")==true)
{
return true;
}
else
{
return false;
}
}
function checkfrm()
{
var selcteddate=document.newrequest.sel.value;
var sdate=new Date(selcteddate);
alert("check 2");
if(document.newrequest.server.value=="select")
{
alert("Select server");
return false;
}
else
{
return true;
}
}
</script>
<form id="newrequest" name="newrequest" method=post action="cgi-bin/newrequest.cgi" onsubmit="return checkfrm();">
<td colspan=2>
<input type="submit" id="submit" name="submit" value="Submit" onclick="return confrm();" />
</td>
You can do it without return. Try this :
<script type="text/javascript">
function confrm(){
alert("check1");
if(confirm("Are you going to submit this form?")==true) {
document.getElementById("newrequest").submit();
}else{
return false;
}
}
</script>
<form id="newrequest" name="newrequest" method="post" action="cgi-bin/newrequest.cgi" onsubmit="checkfrm();">
<td colspan=2>
<input value="Submit" type="input" onclick="confrm();" />
</td>
You can find the guide for onclick event on
http://www.w3schools.com/jsref/event_onclick.asp
and Submit guide on
http://www.w3schools.com/jsref/met_form_submit.asp

Validation for radio button using javascript

I have 2 radio buttons. I need to give validations for radio button using javascript. Please tel me whats wrong with my code. Here is the code.
$(function() {
$("#XISubmit").click(function(){
var XIGender= document.forms["XIForm"]["XIGender"].value;
if (XIGender==null || XIGender=="") {
alert("Please select the gender");
return false;
}
document.getElementById("XIForm").submit();
});
Here is my HTML code:
<label>Gender </label> &nbsp&nbsp
<input type='radio' name='XIGender' value='Male' id="XImale"/>Male
<input type='radio' name='XIGender' value='Female' id="XIfemale"/>Female</td>
One more here,
$(document).ready(function() {
$("#XISubmit").click(function () {
if($('input[name=XIGender]:checked').length<=0){
alert("Please select the gender");
return false;
}
$( "#XIForm" ).submit();
});
});
JSFiddle
Here is the code. You will have to create a form and validate it on submit.
HTML:-
<form name="myForm" action="targetpage.asp" onsubmit="return validateForm();" method="post">
<label>Gender</label>&nbsp&nbsp
<input type='radio' name='XIGender' value='Male' id="XImale" />Male
<input type='radio' name='XIGender' value='Female' id="XIfemale" />Female</td>
<input type="submit" value="submit" id="XISubmit" />
</form>
JS:-
function validateForm() {
if (validateRadio(document.forms["myForm"]["XIGender"])) {
alert('All good!');
return false;
}
else {
alert('Please select a value.');
return false;
}
}
function validateRadio(radios) {
for (i = 0; i < radios.length; ++i) {
if (radios[i].checked) return true;
}
return false;
}
Hope this will help you. :)
Enjoy coding.
<form name="formreg" enctype="multipart/form-data" method="post">
<input type="radio" value="male" name="gender" /> Male<br />
<input type="radio" value="female" name="gender" /> Female<br />
<input value="Submit" onclick="return inputval()" type="submit" />
</form>
JS:
<script type="text/javascript">
function inputval() {
var $XIForm = $('form[name=XIForm]');
if ($("form[name='formreg'] input[type='radio']:checked").length != 1) {
alert("Select at least male or female.");
return false;
}
else {
var gender = $("input").val();
//alert(gender);
$XIForm.submit();
alert(gender);
}
}
</script>
You can't get the value of the radio button like that. document.forms["XIForm"]["XIGender"] will return more than one node and you can't get the value property of a list of nodes. Since your using jQuery, this can be made much easier:
$("#XISubmit").click(function () {
var $XIForm = $('form[name=XIForm]');
var XIGender = $XIForm.find('input[name=XIGender]:checked').val();
if (XIGender == null || XIGender == "") {
alert("Please select the gender");
return false;
}
$XIForm.submit();
});
JSFiddle
Use the :checked selector as below
function() {
var len = $("input:checked").length;
if(len == 0) {
alert("Please select a gender");
return false;
}
see fiddle

Categories

Resources