Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript Validation form not working in Chrome?

    Hi,
    What i am trying to do is use forms to repeat what I type in the text box as a string when i click.
    I have a form with a text box and a submit button, currently when i type in the text box it will give an error if i have no text in the text box it does this correctly. The else statement of my code will show a welcome message followed by var x which gets the value from the text box. so the user types in their name and it returns the value.

    The problem i have is that when i open it with Chrome and enter a value the message shows up for a split second and then goes away and the text box is left empty. As with the error message which displays that they haven't typed anything which remains. The code works in dreamweaver but when I open it doesn't work quite right. Here is my code:

    function validateForm()
    {
    var x=document.forms["myForm"]["fname"].valu…
    if (x==null || x=="")
    {
    document.getElementById('bla').inner… enter your name";
    return false;
    }
    else
    {
    document.getElementById("bla").inner… " +x;
    }
    }

    HTML:
    <form name="myForm" onsubmit="return validateForm()">
    First name: <input type="text" name="fname">
    <input type="submit" value="Submit">
    </form>
    <p id="bla"></p>

    also idk if its worth to note the address bar changes whenever i enter a value, but the return value isnt displayed.

    /index.html?fname=John

    What am i doing wrong and is there an easier way to do this?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    You must post your proper code and not

    document.getElementById('bla').inner… enter your name";

    But you should be aware that form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe. Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    A form field can never be null. Only "" (blank).

    document.getElementById("bla").inner… " +x;
    should be
    document.getElementById("bla").innerHTML += x; or document.getElementById("bla").innerHTML = x;

    Don't give your fields silly names such as "bla".

    Form names are obsolete. You should rather assign an id.

    As Old Pedant said in this forum recently, "It may or may not come as a surprise to you, but NightmarishStalker (the much more descriptive name for DreamWeaver) produces about the worst and most out of date JavaScript code possible. Nobody that I know of in this forum is really willing to tackle DrunkWhomper code. We all prefer to just toss it out and use *GOOD* code."


    A child of five would understand this. Send someone to fetch a child of five.
    Groucho Marx
    Last edited by Philip M; 02-18-2013 at 09:45 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jn2030 (02-18-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, sorry not sure why it wasn't showing the full code.

    function validateForm()
    {
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
    document.getElementById('bla').innerHTML="Please enter your name";
    return false;
    }
    else
    {
    document.getElementById("bla").innerHTML="Welcome " +x;
    }
    }

    The first part of the code to show "please enter your name" whenever the person doesn't enter anything works fine it's just the last part which like I said when I enter a name It should display "Welcome (persons name that they entered) as x " It does this fine in Dreamweaver but when I open it in Chrome It shows up for a split second after i submit and then disapears??

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    That's because the form is submitting (to itself), thusly refreshing the page. Prevent the form from submitting by adding another "return false;" to the else portion.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Here you are:-

    Code:
    <form id = "myform">
    Enter your name:- <input type = "text" name = "fname" id = "fname" onblur = "validateForm()"><span id = "uname"></span>
    <br>
    
    </form>
    <script type = "text/javascript">
    
    function validateForm() {
    document.getElementById('uname').innerHTML="";  // reset the field
    var x = document.getElementById("fname").value;
    x = x.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
    x = x.replace(/[^a-z\s\-\']/gi,"")  // strip inpappropriate characters
    x = x.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
    document.getElementById("fname").value = x;  // write it back to the field
    if (x.length < 2) {
    document.getElementById('uname').innerHTML= " Please enter your name!";
    document.getElementById('fname').focus();
    return false;
    }
    else {
    document.getElementById("uname").innerHTML= " Welcome " +x;
    }
    
    
    }
    
    </script>
    A submit button does what it says - submits a form to a server-side script specified in the form action. If no action is specified the form submits to itself, which in effect reloads the page. Adding another return false will stop the form from submitting - ever!!
    Last edited by Philip M; 02-18-2013 at 09:17 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Another way to do it:

    Don't use onsubmit= in the </form>.

    And don't use a submit button.

    Instead, just use
    Code:
    <input type="button" value="Submit" onclick="validateForm()" />
    Then it doesn't matter what you return from validateForm, the form won't get submitted.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    the form won't get submitted.
    and if JavaScript is not available then the form will do nothing at all.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,436
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    Quote Originally Posted by felgall View Post
    and if JavaScript is not available then the form will do nothing at all.
    Yep, but I don't think he really wants to do anything at all.

    After all, the form as it is now is just submitting back to the same HTML page, which is clearly pointless if JS isn't enabled.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Yep, but I don't think he really wants to do anything at all.
    If the form is supposed to do nothing if JavaScript is not available then it would probably be better to create the entire form from JavaScript so that those without JavaScript don't see a broken form.

    The other alternative is that the OP intends to redirect to a different page from the form once they get the server side version built - in which case they are working backwards as the server side version ought to be built first - but maybe the OP hasn't learnt the other language yet and so is leaving it until they do.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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