www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 41 of 41

Thread: Help with passing values thru HTML and .js file

  1. #31
    Join Date
    Feb 2014
    Posts
    22
    Adding to the last part that blank validation would be nice, but it wouldn't work exactly as each text box would want a different error message. ex: Please provide first name, Please provide email, etc

  2. #32
    Join Date
    Feb 2014
    Posts
    22
    There is another way...maybe. Lets say I validate empty text box in function in .js and then I validate expression for say email. Could I make a function in my HTML script using those validation with the text boxes? That could be a way and possibly easier?

    Code:
    function textbox(checkBlank)
    {
           if (checkBlank == "")
           {
                error(errorMessage);
           }
    }
    In HTML
    Code:
    function validate()
    {
          if (first == textbox) (Not sure about this)
          {
                  errorMessage += "Enter your name";
          }
    }
    if (!error == "")
    {
             alert(error);
             or
             alert(errorMessage)
    }
    If that makes sense.

  3. #33
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248


    If you ask me, relying to much on event handlers isn't a reliable method. What if a user just clicks on a button to process a form without clicking, inputting etc... on any element at all? So, you'll have to somehow get all of the elements in a web page using their id attribute or by tag names etc...loop through them and check for a specified condition etc... One way to that is by obtaining all input elements with the document.getElementsByTagName(), loop through them and check for theirs values, types (radio, txt, checkbox...)... or by obtaining elements with the document.getElementById() and in that case you have to know theri id attribute value.

    I really don't know how else you can do it... For example in code I have provided you with, you can update it to check any radio button (of a specific form or in a whole web page), any empty textbox etc... Really don't know how else you can do it and to expect a result to be reliable....

  4. #34
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Let's make something clear!

    1. You can check for example for all textboxes in a web page if they are blank or not and if they are you can alert a user with a message that indicates that some (or all) of the required input fields are blank. But next question is how do you plan to "put" appropriate message in those fields if you don't have any method of identifying them (element name, id, class...)???

    2. Did you have a look at my code carefully enough? If you take a look you'll se that despite I'm using the document.getElementById() method you don't have to know in advance the value of id attribute. The only thing you have to obtain is the element name. And someone who will actually code a web document why it would be such a problem to specify a descriptive name for an element? For example an input element who takes number from a user would have a descriptive name of let's say "phone".

    So you invoke the validateAll function, get all elements with the phone name and apply validation according to your condition for that type of elements.

    Anything else (not using names, ids...) would be a killer if you ask me and you'll have to incorporate a lot of unnecessary coding directly to an HTML element (through event handler...) and apply the same for each element in a web document....

    Let someone correct if I'm wrong!
    Last edited by tech_soul8; 02-11-2014 at 11:50 AM.

  5. #35
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Is this more close to something you were looking for?

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="UTF-8" />
       <title id='tit'>Untitled</title>
       <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
       <form name="myForm" method="get">
          Name: <input type="text" onblur="validateName(this)" /><br />
          Email: <input type="text" onblur="validateEmail(this)" /><br />
          Phone: <input type="text" onblur="validatePhone(this)" /><br />
       </form>
       <form name="myForm2" method="get">
          Name: <input type="text" onblur="validateName(this)" /><br />
          Email: <input type="text" onblur="validateEmail(this)" /><br />
          Phone: <input type="text" onblur="validatePhone(this)" /><br />
       </form>
       <hr />
       <h3>Uncomment the section of JavaScript code to validate this elements on a form submission!</h3>
       Name: <input type="text" onblur="validateName(this)" /><br />
       Email: <input type="text" onblur="validateEmail(this)" /><br />
       Phone: <input type="text" onblur="validatePhone(this)" /><br />
       <input type="button" onclick="validateAll()" value="Process" />
    </body>
    </html>
    Code:
          function validateName(that) {
             var msg = "Enter your name!!!"
             
             if(that.value === msg || that.value === "") that.value = msg;
             return;
          }
          
          function validateEmail(that) {
             var msg = "Please enter a valid email address!!!";
             
             if(!/example@example.com/.test(that.value)) that.value = msg;
             return;
          }
          
          function validatePhone(that) {
             var msg = "Please enter a valid phone number!!!";
             
             if(!/\d{9}/.test(that.value)) that.value = msg;
             return;
          }
          
          function validateAll() {
             var forms = document.forms, txtElems = [], passed = true, msg = "No empty value is allowed!!!"
    
             //get all txt elements from all forms
             for (var i = 0; i < forms.length; i++) {
                for (var j = 0; j < forms[i].elements.length; j++) {
                   if (forms[i].elements[j].type === "text")
                      txtElems.push(forms[i].elements[j]);
                }
             }
             
             /* use for all txt elements on a web page regardless if they are inside a form or not
                var inpElems = document.getElementsByTagName('input');
                
                for (var i = 0; i < inpElems.length; i++) {
                   if (inpElems[i].type === "text") txtElems.push(inpElems[i]);
                }
             */
           
             //check each txt element's value and alert a user of empty ones
             for (var i = 0; i < txtElems.length; i++) {
                if (txtElems[i].value == "" || txtElems[i].value == msg) {
                   txtElems[i].value = msg;
                   passed = false;
                }
             }
             
             if (passed) forms[0].submit();
          }

  6. #36
    Join Date
    Feb 2014
    Posts
    22
    Another great examples, but that isn't it. I was just speaking to them and they wanted the element to be able to come from .js to HTML an example they gave me is

    HTML
    Code:
    first = getFunction(first);
    .js
    Code:
    getFunction(x)
    Where x equals first. I should be able to pass the element id from the javascript. I can use two scripts in the HTML to help if needed, but they want my .js only with the elements to validate. It should be something like that and event handlers can be used, but don't have to be. Two script tags can be used.

  7. #37
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    I have an idea... I'll post code later, currently I am busy... It'll be a sort of reinventing a wheel but if that is what you want...

  8. #38
    Join Date
    Feb 2014
    Posts
    22
    That would great. I can have a look at it.

  9. #39
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    I thought I have an idea but then I took another look at your replies and more I read unfortunately less I understand.

    HTML Code:
    <input type="text" id="text" name="text" />
    Code:
    var text = getFunction('text'); // would initialize the text variable with the input element from HTML
    Is that how would you like for your function to operate?

    Or you may do something like this for example to validate an element (any element with a name or id) for a valid email address:

    Code:
    validateMail(getFunction('email'));
    I would really like to get this thing done but unfortunately I have some hard times understanding your demands.

    I mean you have a bunch of DOM methods at your disposal to get any element you wish:

    1. getElementById()
    2. getElementsByTagName()
    3. getElementsByName()
    4. element.getElementsByTagName() (to get child elements)

    I can understand that you're trying to build some kind of API, library...but as I said it would be something similar to reinventing the wheel. The only thing were I can see some use of it is for example if you want to build some kind of let's call it generic library for validating your forms...

    Something like:

    1. Define function which will accept one argument. That argument can be object, array, string... The function will search entire DOM tree for any occurrence of specified argument and if an argument element is found will return that element. It would be something like function which will unify all of the already available (above stated) methods to get an element.

    2. Define generic functions for validating emails, names, phone numbers...

    That was my idea but now I'm not sure if I'm wrong again.

    It would be something similar to... Imagine you have a function like one I have mentioned above (to get an element) and its name is getElement. You would be able to do something like this:

    Code:
    var phone = getElement('phone')
    
    validatePhone(phone);
    Above code would search the entire DOM tree for an element with the phone id or name and store it in a phone variable. Then you would invoke validatePhone function to validate if the phone's value is a valid phone number.

    Next thing you can do is something like this:

    Code:
    var phone = getElement(['phone','phone1','phone2','phone3']);
    
    validatePhone(phone);
    The result would be the same as in previous example only this time an array of elements is passed as an argument to the getElement function thus resulting in phone validation for any element on a web page contained inside of an array.

    Another possibility would be something like this:

    HTML Code:
    <input type="text" onblur="validatePhone(getElement(this))" />
    This time you have passed the actual <input> element to the getElement function thus resulting in phone validation only for that particular element on onblur event.

    As you see with functions like that you can do a variety of things. Basically it wouldn't be anything new except the thing that you would combine all of the already available methods and wrap them inside of ultimate getElement function resulting of some kind of API, library...call it whatever you like...

    Hope I was clear enough.
    Last edited by tech_soul8; 02-12-2014 at 12:44 PM.

  10. #40
    Join Date
    Feb 2014
    Posts
    22
    Sorry for the late response and thanks a lot for helping me out. I did figure out what I needed to do. It was pretty basic. All I need was a function/element is .js to call over to my functions in HTML. So for example I would make a function(element) for email expression, then I'd call that over to validate my email text box via function in my HTML. I apologize if I wasn't that clear. I didn't understand it much myself, so was a little confused, but in the process I did learn a lot lol The snippets you showed me are quite useful and handy.

  11. #41
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    I''m glad you made it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles