We Keep Coding

onsubmit() form on mobile browser

I current use a javascript function on the onsubmit() event of my form to check if all the input are not empty.
This works fine on computer, but on mobile phone, it changes the background color (as I want to do when the input is empty) but it still submits the form !!!
My form :
<form id="formContact" action="envoi-message.php" method="post" class="normal" onsubmit="return valideChamps();">
<div class="ddl">
<span>VOUS ÊTES...</span>
<div class="ddlOption">
<ul>
<li onclick="ddlContact('entreprise')"><span>UNE ENTREPRISE</span></li>
<li onclick="ddlContact('ecole')"><span>UNE ÉCOLE</span></li>
<li onclick="ddlContact('personne')"><span>UNE PERSONNE</span></li>
</ul>
</div>
</div>
<input class="cache" type="text" name="entreprise" placeholder="NOM DE L'ENTREPRISE" />
<input class="cache" type="text" name="ecole" placeholder="NOM DE L'ÉCOLE" />
<input type="text" name="nom" placeholder="VOTRE NOM" />
<input type="email" name="email" placeholder="VOTRE EMAIL" />
<textarea name="message" placeholder="VOTRE MESSAGE" ></textarea>
<input id="btnEnvoi" type="submit" value="Envoyer">
</form>
My function :
function valideChamps(){
var bResult = true;
if ($("input[name*='nom']").val() == "") {
$("input[name*='nom']").addClass("error");
bResult = false;
} else {
$("input[name*='nom']").removeClass("error");
}
if ($("input[name*='email']").val() == "") {
$("input[name*='email']").addClass("error");
bResult = false;
} else {
var regex = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (regex.test($("input[name*='email']").val()) == false ) {
$("input[name*='email']").addClass("error");
bResult = false;
} else {
$("input[name*='email']").removeClass("error");
}
}
if ($("#formContact textarea").val() == ""){
$("#formContact textarea").addClass("error");
bResult = false;
}else {
$("#formContact textarea").removeClass("error");
}
if ($("div.ddl > span").text().contains("entreprise")){
if ($("input[name*='entreprise']").val() == "") {
$("input[name*='entreprise']").addClass("error");
bResult = false;
}else {
$("input[name*='entreprise']").removeClass("error");
}
} else if ($("div.ddl > span").text().contains("école")){
if ($("input[name*='ecole']").val() == "") {
$("input[name*='ecole']").addClass("error");
bResult = false;
}else {
$("input[name*='ecole']").removeClass("error");
}
}
return bResult;
}
Do you have any idea about what is wrong...?
Best regards
Audrey
EDIT : I changed my submit button; I put a with onclick which submits the form if bResut == true

Try registering your submit handler to the form using JS, so you can access the event and call preventDefault() instead of (or in addition to) returning false;
Like so:
document.getElementById('formContact').onsubmit = function(e) {
//your validateChamps stuff goes here
if(!bResult) e.preventDefault();
};

EDIT : I changed my submit button; I put a with onclick which submits the form if bResut == true

How can I do live validation for radio button on click event just like we do for textbox on keyup event?

I want to know how can i live validate radio button like text box on click event or on key up or press event? Like textbox, when we start typing and if it passes validation, then error message is gone; in the same way i want to implement this functionality for radio button. I have the following code which works only for textbox on keyup event and not for radio buttons -
HTML -
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td>
<input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td>
<input type="radio" name="gender" id="radmale" value="Male" onClick="this.checked; return isValid();" />
<label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return isValid();" />
<label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="btnsubmit" value="Register" onClick="return isValid();">
</td>
<td>
<input type="reset" value="Clear Form">
</td>
</tr>
</table>
</form>
JavaScript -
<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender("radmale", "radfemale", "errgender", "Select your gender");
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
// checking is gender selected
function checkGender(ctrid1, ctrid2, errid, errmsg)
{
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
}
}
</script>
Another issue I am facing in this code is regarding reqdField() function. This function does work and only isValidEmail() runs. I only see email is not valid when it is left empty and can not display email id is empty. How can i achieve the same?
Here is the demo JSFiddle

<script type="text/javascript">
var flag;
function isValid()
{
flag = true;
reqdField("txtemail", "erremail", "Email ID is empty");
isValidEmail("txtemail", "erremail", "Email ID is not valid", /^[a-z0-9_.-]+#[a-z-.]+\.[a-z.]{2,5}$/);
checkGender();
return flag;
}
// checking all required fields
function reqdField(ctrid, errid, errmsg)
{
var str = document.getElementById(ctrid).value;
if(str.length == 0)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
// checking is email id valid
function isValidEmail(ctrid, errid, errmsg, validExp)
{
var email = document.getElementById(ctrid).value;
if(email.length == 0){
return;
}else{
if(email.match(validExp) == null)
{
document.getElementById(errid).innerHTML = errmsg;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
flag = true;
}
}
}
// checking is gender selected
function checkGender()
{
var ctrid1="radmale", ctrid2="radfemale", errid="errgender", errmsg="Select your gender"
var male = document.getElementById(ctrid1);
var female = document.getElementById(ctrid2);
if(male.checked == false && female.checked == false)
{
document.getElementById(errid).innerHTML = errmsg;
return false;
flag = false;
}
else
{
document.getElementById(errid).innerHTML = "";
return true;
}
}
</script>
and html is
<form name="form1" id="form1" method="post" action="">
<table border="0" align="center" width="50%" cellpadding="5">
<tr>
<th align="right" valign="top"><label for="txtemail">Email ID:</label></th>
<td><input type="text" name="txtemail" id="txtemail" size="30" onKeyUp="return isValid();" />
<span id="erremail"></span>
</td>
</tr>
<tr>
<th align="right" valign="top"><label>Gender:</label></th>
<td><input type="radio" name="gender" id="radmale" value="Male" onClick="return checkGender();" /><label for="radmale">Male</label>
<input type="radio" name="gender" id="radfemale" value="Female" onClick="return checkGender();" /><label for="radfemale">Female</label>
<span id="errgender"></span>
</td>
</tr>
<tr>
<td align="right"><input type="submit" name="btnsubmit" value="Register" onClick="return isValid();"></td>
<td><input type="reset" value="Clear Form"></td>
</tr>
</table>
</form>
Fiddle

$("input[type=radio]").click(function(){
var set = $(this).attr("name");
validateRadioSet(set);
});

jQuery: Script isn't preventing submit function from firing when form has errors

Essentially, I am trying to have my form clear all input fields on submit if the default values are still present. Then if there are default values still present, then the submit process is stopped. The form clears the fields on submit, but wont stop the submit button from executing like its suppose to. Please help me out on this. I wrote this myself, and still trying to figure out why it isn't working.
The jQuery Script Below:
<script type="text/javascript" >
$(document).ready(function(){
$(".forms").each(function(){
var DefaultValue = $(this).value;
$("#Form_1").submit(function(){
if ( CheckInput() == "empty" ){
return false;
}
});
function CheckInput(){
var x = '';
$(".forms").each(function(){
if ($(this).value == DefaultValue){
this.value = '';
var y = "empty";
return y;
}
x = y;
return x;
});
}
});
});
</script>
The HTML code below:
<form id="Form_1">
<table>
<tr>
<td>
<table cellpadding="2" cellspacing="3" width="500px">
<tr>
<td>
<div class="InputContainer">
<input name="FirstName" value="First Name" class="forms" type="text"required="true" ></input>
<div class="InfoBlurp">First Name<div class="InfoTip"></div></div></div>
</td>
<td>
<div class="InputContainer">
<input name="BirthDate" value="Birth Date(MM/DD/YYYY)" class="forms" type="text" required="true" ></input>
<div class="InfoBlurp">Birth Date(MM/DD/YYYY)<div class="InfoTip"></div></div></div>
</td>
<td>
<div class="InputContainer">
<input name="Email" value="Email#sample.com" validType="email" class="forms" type="text" required="true"/></input>
<div class="InfoBlurp">Email#sample.com<div class="InfoTip"></div></div></div>
</td>
</tr>
</table>
<input id="Button_1" class="topopup" type="submit" value="" style="background-color: #FFFFFF; border:none; cursor:pointer;">
</form>

Your checkInput method is not returning anything, you are returning values from the each callback function not from the CheckInput method.
$(document).ready(function () {
$(".forms").each(function () {
var DefaultValue = $(this).value;
$("#Form_1").submit(function () {
if (CheckInput() == "empty") {
return false;
}
});
function CheckInput() {
var x = '';
$(".forms").each(function () {
if ($(this).value == DefaultValue) {
this.value = '';
x = "empty";
//return false to stop further iteration of the loop
return false;
}
});
return x;
}
});
});

JavaScript Button Error

The issue I have with my JavaScript is that when I select the "Send" button for a blank form, it tells me which fields to complete (which I want). After selecting "OK", it asks me to "Please enter a valid email address." in another window.
Can anyone help me with the functions and logic to eliminate this second window if one selects "Send" without filling out the form? Do I need to create a new function for "Entering a valid email address"?
Here's the code:
javascript
function checkforblank() {
var errormessage = "";
if (document.getElementById('fname').value =="") {
errormessage += "enter your first name \n";
}
if (document.getElementById('lname').value =="") {
errormessage += "enter your last name \n";
}
if (document.getElementById('email').value =="") {
errormessage += "enter your email \n";
}
if (document.getElementById('confirmEmail').value =="") {
errormessage += "confirm your email \n";
}
if (errormessage != "") {
alert(errormessage);
return false;
}
};
function verifyEmail() {
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myForm.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
}
else if (document.myForm.email.value != document.myForm.confirmEmail.value) {
alert("Email addresses do not match. Please retype them to make sure they are the same.");
}
else {
alert("Thank you for your interest!");
status = true;
}
return status;
}
function confirmEmailAddresses() {
checkforblank();
verifyEmail();
}
html
<div id="content">
<form name="myForm" action="#" method="get" enctype="application/x-www-form-urlencoded" onsubmit="">
<table width="377" height="96">
<tr>
<td style="text-align: right">First Name:</td>
<td><label for="FirstName"></label>
<input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td style="text-align: right">Last Name:</td>
<td><label for="LastName"></label>
<input type="text" name="lname" id="lname"></td>
</tr>
<tr>
<td style="text-align: right">E-mail:</td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td style="text-align: right">Confirm E-mail:</td>
<td><input type="email" name="confirmEmail" id="confirmEmail"></td>
</tr>
</table>
<input type="submit" value="Send" onClick="confirmEmailAddresses()"><input type="reset" value="Reset Form">
</form>
</div>
I'm fairly new to JavaScript, so please make this as easy as possible! :) Thank you.

replace
function confirmEmailAddresses(){
checkforblank();
verifyEmail();
}
with
function confirmEmailAddresses(){
if ( checkforblank() ) {
verifyEmail();
}
}
and add else return true; like so
if (errormessage != "") {
alert(errormessage);
return false;
} else return true;
so if (in the checkforblank() function) errormessage is not (!=) empty ("") then checkforblank() tells the script (returns) true and if (in confirmEmailAddresses() now) and only if checkforblank() is truthy (true is kinda pretty truthy) then verifyEmail() is run, the end (;). :p

Is this what you want?
function confirmEmailAddresses() {
if(checkforblank() && verifyEmail())
return true;
else return false;
}

ok i think what your asking for is this (jquery)
$(":submit").click( function(event) {
if(!checkforblank() || !verifyEmail()) {
event.preventDefault();
}
});
if you do this make sure to include after then button in the html. or enclose in a $(document).ready

Result of Compute function is not being displayed in the TextBox

I have an HTML page where there are two Textboxes and a Button. And I had written a Compute function to display the result in a Textbox but its not working. Alerts are not being fired on the page.
Can any one help me out here, where am i going wrong.
<script type="text/javascript">
function isNumericKey(e)
{
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e)
{
var charCode = e.which;
}
else
{
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function submitMyNumber()
{
alert(1);
var x = document.getElementById('myInput').value;
return x.match(/^[0-9]+$/) != null;
var y = document.getElementById('myInput1').value;
return y.match(/^[0-9]+$/) != null;
compute();
}
function compute()
{
alert(1);
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getByElementById('myinput1').value;
alert(hr);
a=60/hr;
alert(a);
b=math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.write(a + "" + b+ " " + c+ "")
}
</script>
</head>
<body>
<form>
<table align="center" style="border:2px solid black">
<tr>
<td>Qtc:</td>
<td><input type="text" id="myInput" name="myInput" onkeypress="return isNumericKey(event);" /><br /></td></tr>
<tr>
<td>Hr:</td>
<td><input type="text" id="myInput1" name="myInput1" onkeypress="return isNumericKey(event);" /><br />
</td>
</tr>
<tr>
<td> <input type="submit" id="mySubmit" name="mySubmit" value="Submit only Number" onclick="compute()" />
</td>
</tr>
<tr><td><input type="text" id="result" name="result" value="" /></td></tr>
</table>
</form>
</body>
</html>

in this function
function submitMyNumber() {
var x = document.getElementById('myInput').value;
return x.match(/^[0-9]+$/) != null; // <-- return
var y = document.getElementById('myInput1').value;
return y.match(/^[0-9]+$/) != null;
compute();
}
on the second line the function is returning, so all next lines won't never be executed.
If I have to guess you probably want to do something like
function submitMyNumber() {
var x = document.getElementById('myInput').value;
if (!x.match(/^[0-9]+$/)) { return false }
var y = document.getElementById('myInput1').value;
if (!y.match(/^[0-9]+$/)) { return false }
compute();
}

There are typo errors in your code:
Update: Fiddle
In compute() function
getByElementById('myinput1') should be getElementById('myInput1')
math.sqrt(a); should be Math.sqrt(a);
The function should look like
function compute(){
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getElementById('myInput1').value;
alert(hr);
a=60/hr;
alert(a);
b=Math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.write(a + "" + b+ " " + c+ "")
//var result = document.getElementById('result');
//result.value = c;
}
Your html form must have a name=form1 <form name="form1">
<form name="form1">
<table align="center" style="border:2px solid black">
<tr>
<td>Qtc:</td>
<td><input type="text" id="myInput" name="myInput" onkeypress="return isNumericKey(event);" /><br /></td>
</tr>
<tr>
<td>Hr:</td>
<td><input type="text" id="myInput1" name="myInput1" onkeypress="return isNumericKey(event);" /><br /></td>
</tr>
<tr>
<td><button type="button" onclick="compute(); return false;">Submit only Number</button></td>
</tr>
<tr><td><input type="text" id="result" name="result" value="" /></td></tr>
</table>
</form>

Possible mistakes in your code
Compute function is never getting called
Result text box value is never set

You dont have a form name in your code :
Change this from <form>
to
<form name = "form1" >
PS:
When you use something like document.form1.myInput.value;
You tell get the myInput value from the form with name form1

Change your return statements to if statements:
function submitMyNumber()
{
alert(1);
var x = document.getElementById('myInput').value;
if (x.match(/^[0-9]+$/) === null ) {
return;
}
var y = document.getElementById('myInput1').value;
if (y.match(/^[0-9]+$/) === null ) {
return;
}
compute();
}

I think Function should be:
function submitMyNumber() {
var x = document.getElementById('myInput').value;
var x_match= x.match(/^[0-9]+$/) != null;
//Store x_match in hiddenfield
var y = document.getElementById('myInput1').value;
var y_match= y.match(/^[0-9]+$/) != null;
//Store y_match in hiddenfield
compute();
return;
}

There are lot of javascript errors in above code i dont know what you are trying to do but correct javascript will be
function compute()
{
alert(1);
var a,b,c;
var qtc=document.form1.myInput.value;
alert(qtc);
var hr=document.getElementById('myInput1').value;
alert(hr);
a=60/hr;
alert(a);
b=Math.sqrt(a);
alert(b);
c=qtc/b;
alert(c);
document.getElementById('result').value = c;
//document.write(a + "" + b+ " " + c+ "")
return false;
}
plus form tag dont have name field. it should be like
<form onsubmit="return false;" name="form1">
and submit button should return false
like
<input type="submit" id="mySubmit" name="mySubmit" value="Submit only Number" onclick="compute(); return false;" />
or else form will continue to submit whether you got javascript error or not
You tool Like firebug to locate your javascript errors