function validate_request_form(){
var valid = true;
if ( document.request_form.firstname.value == "" )
{ alert ( "Please fill in first name" ); valid = false; return false; }
return valid;
}
$j('#video-request-form').submit(function() {
if (!validate_request_form() )
return false;
});
I am using this code to validate my form. My form has id=video-request-form and the form name is request_form. This all works fine in latest FF, but can't get it to work in IE6...anyone?
I suggest utilizing jQuery more instead of native JS. They are they to help. Try the following:
function validate_request_form(){
var valid = true;
if ( $j('#firstname').val() == "" ) {
alert ( "Please fill in first name" ); valid = false; return false;
}
return valid;
}
This assumes the field has an ID of firstname
Related
alright, whats wrong with my script, JShint is throwing three lines of red code saying i have issues in my variable and my if/else statement. I am trying to validate if the phone number is a valid USA phone format
$( "#phone" ).focusout(function telephone() {
if( this.value === "" || this.value === null ) {
$( "#error_messages" ).text("");
return false;
} else {
var re = \d{3}[\-]\d{3}[\-]\d{4};
if(re.test(document.getElementById("phone").value)) {
$( "#error_messages" ).text("");
return true;
} else {
$( "#error_messages" ).text("Phone Number* not a valid format xxx-xxx-xxxx");
return false;
}
}
});
Firstly, you don't need a name for closure function. Secondly you have not enclosed regex with /..../.
var re = /\d{3}[\-]\d{3}[\-]\d{4}/;
You Should try this.
$(function(){
$("#phone").change(function telephone() {
if (this.value === "" || this.value === null) {
$("#error_messages").text("");
return false;
} else {
if (/\d{3}[\-]\d{3}[\-]\d{4}/.test($(this).val())) {
$("#error_messages").text("");
return true;
} else {
$("#error_messages").text("Phone Number* not a valid format xxx-xxx-xxxx");
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" id="phone" />
<span id="error_messages"></span>
This is an expression tested on http://tools.netshiftmedia.com/regexlibrary/# for numbers. change it to /^\d{3}[\-]\d{3}[\-]\d{4}$/ in your JS code and apply regex code within /..../ in that tools
I applied
^\d{3}[\-]\d{3}[\-]\d{4}$
It's ok with your numbers :
I have the following form, done with HTML and Javascript validation.
var submitOK=true;
function validate(){
submitOK=true;
checkName();
checkSurname();
checkCourse();
checkDate();
checkEmail();
if(submitOK == false) {
return false;}
}
function checkName() {
var name = document.getElementById("name");
if(myform.name.value.length==0)
{
document.getElementById("checkname").innerHTML="Please, enter a valid name";
submitOK=false;
}
}
(COMPLETE CODE IN HERE)
http://jsfiddle.net/unkok6or/
The fields Course, Date, Name, Surname and Email have to be required. I don't know why my code is wrong and how to fix it.
-What I would like, is an error message to appear if one of the fields is not complete. Now the form runs and works even if one of them is not completed.
-The email with the correct format (without Regex).
Thanks in advance! :)
I simplified your code a little bit. This worked for me. The key thing to remember that your submit function must return a true to submit or false to stop the submit.
var submitOK=true;
function validate(){
submitOK=true;
checkName();
checkSurname();
checkCourse();
checkDate();
checkEmail();
return submitOK;
}
function checkName() {
if( document.getElementById("name").value.length==0)
{
document.getElementById("checkname").innerHTML="Please, enter a valid name";
submitOK=false;
}
}
function checkSurname() {
if(document.getElementById("surname").value.length==0)
{
document.getElementById("checksurname").innerHTML="Please, enter a valid surname";
submitOK=false;
}
}
function checkEmail() {
if(document.getElementById("email").value.length==0)
{
document.getElementById("checkemail").innerHTML="Please, enter an email";
submitOK=false;
}
}
function checkCourse() {
if(document.getElementById("course").selectedIndex < 1 ) {
document.getElementById("checkcourse").innerHTML="Please, select a course";
submitOK=false;
}
}
function checkDate() {
if(document.getElementById("date").selectedIndex < 1) {
document.getElementById("checkdate").innerHTML="Please, select a date";
submitOK=false;
}
}
You need to return true when your validation passes so change
if(submitOK == false) {
return false;}
to
return submitOk;
If you just need to make sure all the fields are filled, why don't you use required keyword on ur input types.
And for drop down you can disable the select option that way you don't need to check if the user has selected the default value.
I am very new to using JavaScript so bear with me. I only finished the different courses found on Codecademy so far.
So I'm trying to make a sign up form for a website where you need a user. I found a pretty cool one on the internet that I changed a bit and also made use of the Datepicker from jQuery. It looks like this:
I got code to check whether the user filled out the different fields but it doesn't seem to work. In my index.html file I included the following file:
<script src="js/signupsubmit.js"></script>
And at the bottom of the form I do this:
<div>
<p id="sign_user" onClick="Submit()">Sign Up</p>
</div>
So good so far. In the JavaScript I have the following code:
function Submit() {
var emailRegex = /^[A-Za-z0-9._]*\#[A-Za-z]{2,5}$/;
var fname = document.form.Name.value,
lname = document.form.LastName.value,
femail = document.form.Email.value,
freemail = document.form.enterEmail.value,
fpassword = document.form.Password.value,
dateObject = $("#datepicker").datepicker(
{
onSelect: function()
{
var dateObject = $(this).datepicker('getDate');
}
});
if( fname == "") {
document.form.name.focus();
document.getElementById("errorBox").innerHTML = "Enter First Name";
return false;
}
if( lname == "" )
{
document.form.LastName.focus() ;
document.getElementById("errorBox").innerHTML = "Enter Last Name";
return false;
}
if (femail == "" )
{
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "Enter your Email Address";
return false;
}else if(!emailRegex.test(femail)){
document.form.Email.focus();
document.getElementById("errorBox").innerHTML = "Enter a Valid Email Address";
return false;
}
if (freemail == "" )
{
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter the Email Address";
return false;
}else if(!emailRegex.test(freemail)){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "Re-enter a Valid Email Address";
return false;
}
if(freemail != femail){
document.form.enterEmail.focus();
document.getElementById("errorBox").innerHTML = "The Email Addresses don't Match!";
return false;
}
if(fpassword == "")
{
document.form.Password.focus();
document.getElementById("errorBox").innerHTML = "Enter a Password";
return false;
}
if(dateObject == null) {
document.form.datepicker.focus();
document.getElementById("errorBox").innerHTML = "Please Enter a Birthday";
}
}
I am a bit shaky on trying to read the Datepicker too. But otherwise, can you possibly spot what might be missing in this puzzle? When I press the blue "Sign Up" button, literally nothing happens. I can provide more info if needed.
You have a mistake addressing the form: The correct formula is not document.form, but document.forms[0]. Or even better, I recommend you to give the form a specific unique name, and address it by that name:
HTML:
<form name="mydata">...</form>
Javascript:
var fm=document.forms.mydata
Also, take care of lowercase/uppercase lettering: Identifiers in Javascript are case-sensitive, which means that the input "Name" must be always addressed as "Name" (you mispelled that identifier in the line document.form.name.focus()).
i am using this script for validation can anybody help me where i am wrong. i am using this foe mobile number validation.when i run this code with jquery it is not working.
function mobilenumber() {
if(document.getElementById('mobnum').value != ""){
var y = document.getElementById('mobnum').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Invalid Mobile No.");
document.getElementById('mobnum').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Mobile No. should be 10 digit");
document.getElementById('mobnum').focus();
return false;
}
if (!(y.charAt(0)=="9" || y.charAt(0)=="8" || y.charAt(0)=="7"))
{
alert("Mobile No. should start with 9 ,8 or 7 ");
document.getElementById('mobnum').focus();
return false
}
}
}
<input type="submit" value="INSERT"class="btn"onclick="submitForm();">
jquery is
$(document).ready(function(){
function submitForm(){
if(mobilenumber()){
$('#form1').submit(function(){
});
}
else{
alert("Please Input Correct Mobile Numbers");
}
}
});
Use HTML5 Pattern
<input type="number" pattern=".{10}" title="Enter Valid Mob No" required>
var mobile = document.getElementById("mobnum").value;
var numericmob = isNumber(mobile );
if(!numericmob)
{
alert("Enter only positive numbers into the Contact Number field.");
return false;
}
if(mobile.length!=10)
{
alert("Enter 10 digits Contact Number.");
return false;
}
// write function that checks element is number or not
function isNumber(elem)
{
var re = /^[0-9]+$/;
str = elem.toString();
if (!str.match(re))
{
return false;
}
return true;
}
Advantage of this function is you can use it for checking any numeric field on your form, such as id, amount etc.
Use jQUery .submit() function to submit the form after validation is true
<form id="myForm" action="abc.php" method="post">
<!-- Your Form -->
<button onclick="submitForm();">Submit</button>
</form>
now to check if form data is valid here
function submitForm(){
if(mobilenumber()){
$('#myForm').submit();
}
else{
alert("Please Input Correct Mobile Numbers");
}
}
EDIT:
Use the #Aniket's isNumber function to check length and digit in mobile number field. Which is more generic.
if(document.getElementById('mobile_number').value != ""){
var y = document.getElementById('mobile_number').value;
if(isNaN(y)||y.indexOf(" ")!=-1)
{
alert("Invalid Mobile No.");
document.getElementById('mobile_number').focus();
return false;
}
if (y.length>10 || y.length<10)
{
alert("Mobile No. should be 10 digit");
document.getElementById('mobile_number').focus();
return false;
}
if (!(y.charAt(0)=="9" || y.charAt(0)=="8" || y.charAt(0)=="7"))
{
alert("Mobile No. should start with 9 ,8 or 7 ");
document.getElementById('mobile_number').focus();
return false
}
}
try this... this will be needful for you... and if you are looking for ragex pattern then use this....
^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$
I have a form that has some simple javascript to validate a simple questionnaire. It used the name attribute on inputs in the form but now the page is integrated with the clients CMS it needs to use a particular naming convention which I can't get to work.
The old form had inputs like this:
<input type="text" name="firstName" />
but with the cms all fields require "fields[firstName]", e.g.:
<input name="fields[first-name]">
How do I get this to work.
Exisiting JS below:
function validate_form ( )
{
valid = true;
if ( ( document.register.question[0].checked == false ) && ( document.register.question[1].checked == false ) && ( document.register.question[2].checked == false ) )
{
alert ( "Please choose an answer" );
valid = false;
}
else if ( document.register.form_title.value == "" )
{
alert ( "Please fill in the 'Title' box." );
valid = false;
}
else if ( document.register.fName.value == "" )
{
alert ( "Please add your First Name" );
valid = false;
}
else if ( document.register.lName.value == "" )
{
alert ( "Please add your Last Name" );
valid = false;
}
else if ( document.register.email.value == "" )
{
alert ( "Please add a valid email address" );
valid = false;
}
else if ( document.register.country.selectedIndex == 0 )
{
alert ( "Please select your Country" );
valid = false;
}
else if ( document.register.dob1.selectedIndex == 0 )
{
alert ( "Please ensure your date of birth is complete" );
valid = false;
}
else if ( document.register.dob2.selectedIndex == 0 )
{
alert ( "Please ensure your date of birth is complete" );
valid = false;
}
else if ( document.register.dob3.selectedIndex == 0 )
{
alert ( "Please ensure your date of birth is complete" );
valid = false;
}
else if ( document.register.terms.checked == false )
{
alert ( "Please check the Terms & Conditions box." );
valid = false;
}
return valid;
}
you can use jquery with something like this:
$("input[name=fields\\[first-name\\]]").val()