SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form validation problem.

    Hi everyone..I am new to javascript.

    The javascript form validation works fine , but for the first name and the last name field, it is accepting numeric values , but I want it to accept only alphabets. Could you please let me know whats wrong in the code below. Also is there any other error in the below code.

    --javascript file:-

    // JavaScript Document
    var strErrors = "";

    function validateForm() {
    // clean out the string of errors if validation fails more than once
    strErrors = "";

    // calls to the various function to do their particular tasks
    validateName1();
    validateName2();
    validateEmailAddress();
    validatePhone();
    validateRadios();
    validateCheckBoxs();
    validateguestNo();


    if (strErrors.length > 0) {
    displayErrors();
    return false;
    }
    else {
    return true;
    }
    }





    function validateName1() {
    // get the value of what was erntered into the nrobame field
    var strName = document.getElementById("fName").value;

    if(strName.length < 2) {
    strErrors += "Please enter your name.~";
    }
    }

    function validateName2() {
    // get the value of what was erntered into the nrobame field
    var strName = document.getElementById("lName").value;

    if(strName.length < 2) {
    strErrors += "Please enter your name.~";
    }
    }

    function validateEmailAddress() {
    // get the value of what was erntered into the email field
    var strEmail = document.getElementById("emailAdd").value;

    var emailRegex = /^[\w\.]+@[a-zA-Z_]+?\.[a-zA-Z\.]{2,6}$/;

    // check the validity of the email address now then cos something has been entered
    // into the email field - already checked by the checkIfFieldEmpty() function
    if (!emailRegex.test(strEmail)) {
    strErrors += "Please enter a valid email address.~";
    }
    }

    function validatePhone() {
    // get the value of what was erntered into the nrobame field
    var strName = document.getElementById("phoneNo");
    var stripped = strName.value.replace(/[\(\)\.\-\ ]/g, '');

    if(isNaN(parseInt(stripped))) {
    strErrors += "Please enter your phone number.~";
    }
    }

    function validateRadios() {

    var chks = document.getElementsByName("contactMeth");
    var passed = false;

    for(i = 0; i < chks.length; i++) {
    if(chks[i].checked == true) {
    passed = true;
    }
    }
    if(passed == false) {
    strErrors += "Please select contact method.~";
    }
    }

    function validateCheckBoxs() {

    var chks = document.getElementsByName("roomtype[]");
    var passed = false;

    for(i = 0; i < chks.length; i++) {
    if(chks[i].checked == true) {
    passed = true;
    }
    }
    if(passed == false) {
    strErrors += "Please select room type.~";
    }
    }

    function validateguestNo() {
    // get the value of what was erntered into the nrobame field
    var strName = document.getElementById("guestNo").value;

    if(strName.length < 1) {
    strErrors += "Please enter number of guests.~";
    }
    }

    function displayErrors() {

    document.getElementById("errors").innerHTML = "<p>Oops! Please correct the following items/p><ul>";
    var arErrors = strErrors.split("~");
    for (c = 0; c < arErrors.length - 1; c++) {
    document.getElementById("errors").innerHTML += "<li>" + arErrors[c] + "</li>";
    }
    document.getElementById("errors").innerHTML += "</ul>";
    }



    Thank you.....

  2. #2
    SitePoint Addict
    Join Date
    Nov 2008
    Location
    Thailand
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To validate it's only letters something like this maybe

    Code PHP:
    var strErrors = ""
    var strName = "abc123"
     
    if (!strName || /[^a-z]/gi.test(strName)){
    	console.log ('Invalid Name'); // just to test
    	strErrors += "Please enter your name.~";
    }

    Anything inside the square brackets preceded by ^ means not this. So if it matches anything other than a-z then true. The (g) means globally i.e. through out the string and the (i) mean case insensitive.

    Also see that you are basically repeating the same function twice for first and last name. Would be good to make that just one name checking funtion.

    RLM

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot RLM

    Can you please let me know where the code you have written has to be placed so that I can try. The code which I have pasted was not written by me.

    Thank you...

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Wheaton, IL
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code written by RLM2008 should go inside the validateName1 and validateName2 functions, like so:

    Code:
    function validateName1() {
        var strName = document.getElementById('fName').value;
        if (!strName || /[^a-z]/gi.test(strName)){
            strErrors += "Please enter your name.~";
        }
    }
    
    function validateName2() {
        var strName = document.getElementById('lName').value;
        if (!strName || /[^a-z]/gi.test(strName)){
            strErrors += "Please enter your name.~";
        }
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Wheaton, IL
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way, arjun98854, if you are interested in learning JavaScript, SitePoint's book Simply JavaScript has a short section dedicated to form validation. It would help you to write your own code that is honestly cleaner and more flexible than what you have now.

  6. #6
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot mwistrand and RLM for helping me to fix the code. I have used the code which mwistrand has modified for me and it works perfectly fine........

    Thanks again to both of you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •