0

I've used the HTML5 form for a website. I thought, if I use HTML5, it automatically valid the form. But, it won't properly for all the field at all the browser. So, I had to use javascript. As I ain't expert at javascript, I've to face lots of problems.

Here is the website

1)To show the error message, I create a div(div id="validation") beside the input field. I selected the div from javascript by document.getElementById. But, the input filed is not at one. There are many input field. So, I've to use that as class. Problem is there, I can't write the loop/code for document.getElementsByClassName at all.Basically, it's not wise for me to use class for that div#validation and use identical id for selecting by the javascript. Because, there can be same type of form in many number like this page. If anyone click the edit icon, there will be a popup form. So, I should use the div.validation not div#validation. I'm also afraid about the input id. At above link, there are same fielded input are stayed. So, if I target/select the input by id of the form from javascipt, it may not work where multiple form will be stayed. So, I can't understand what should I do. Recently, I've test one by one defining the div#validation and it worked.

(a) So, Please, write the code at least for two input filed targeting the class from javascript. So, I can put the javascript of remaining input field then. Screenshot of When I tested:











One thing that, I don't use "required" at anywhere as I'm using javascript. But, after trying and trying when, nothing is working, I've put "required" attribute at aleast at input field at HTML, javascript works! And without required filed at least at one input filed, javascript is not work! I don't understand why this happened. I don't want to use "required" any more.

(b) Also I want a red background when the filed is invalid like this: How can I do this with CSS or javascript?

Necessary HTML code:

<div class="wrapper">
        <header class="page_title">
            <h1>Create New Job</h1>
        </header>
        <section class="form">
            <form id="form" name="form" method="post" action="#">
                <label>Job ID:</label>
                <input type="text" name="job_id" id="job_id" placeholder="1">
                <div id="validation"></div>
                <label>Start Date:</label>
                <input type="text" name="start_date" id="start_date" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Deadline:</label>
                <input type="text" name="deadline" id="deadline" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Finish Date:</label>
                <input type="text" name="finish_date" id="finish_date" placeholder="mm/dd/yy">
                <div id="validation"></div>
                <label>Budget($):</label>
                <input type="text" name="budget" id="budget" placeholder="100">
                <div id="validation"></div>
                <label>Client ID:</label>
                <input type="text" name="client_id" id="client_id" placeholder="1">
                <div id="validation"></div>
                <label>Client Phone Number:</label>
                <input type="text" name="phone" id="phone" placeholder="01712333333">
                <div id="validation"></div>
                <label>Client Email address:</label>
                <input type="text" name="email" id="email" placeholder="[email protected]">
                <div id="validation"></div>
                <label>Bidder ID:</label>
                <input type="text" name="bidder_id" id="bidder_id" placeholder="1">
                <div id="validation"></div>
                <label>Number of Supervisor:</label>
                <select title="Supervisor" id="num_supervisor">
                        <option value="-1">Select</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                </select>
                <div id="validation"></div>
                <label>Odesk Profile Link:</label>
                <input type="text" name="odesk_link" id="odesk_link" placeholder="https://www.odesk.com/jobs/Frontend-engineer">
                <div id="validation"></div>
                <label>Owner Type:</label>
                <input type="radio" name="owner_type" id="owner_type" value="member" /><label class="text_label">Member</label>
                <input type="radio" name="owner_type" id="owner_type" value="employee" /><label class="text_label">Employee</label>
                <div id="validation"></div>
                <div class="clear"></div>
                <label>Message:</label> 
                <textarea id="message" name="message" rows="2" cols="20" placeholder="Your enquiry goes here"></textarea>
                <div id="validation"></div>
                <input type="submit" name="submit" id="submit" value="Submit" />
        </form>
     </section>
</div>

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
a {
    text-decoration: none;
}

.clear { clear: both; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
    display: block;
}

h1 {
    font-size: 26px;    
}

body {
    background: #fff;
    font-family: sans-serif;
    color: #333;
    font-size: 12px;
    line-height: 1em;
}
.wrapper {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    background: #fff;
}
header.page_title {
    background: #E3E3E3;
    border-radius: 7px 7px 7px 7px;
    color: #333;
    padding: 20px;
    margin: 40px 0 0 0; 
}
.form {
    width: 800px;
    margin: 20px 0 0 2px;
    border: none;
    background: #fff;
}
form {
    border: none;
    background: #fff;   
}

.form label { 
    display: block; 
    text-align: left; 
    width: 200px; 
    float:left; 
    margin: 5px 0 0 20px;
    font-size: 15px; 
}
.form label.text_label {
    width: auto;
    display: inline;
    margin: 5px 20px 15px 10px; 
}
.form input, .form select {
    float:left; 
    font-size:13px;
    margin: 0 0 10px 0; 
    padding: 0;
}
.form input:required {

}
input:valid {
    border: 1px solid #909090;

}
input[type=text]:invalid, input[type=date]:invalid, input[type=number]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=url]:invalid, textarea:invalid {
    border: 1px solid #FF0000;

}

.form input[type=text], .form input[type=date], .form input[type=number], .form input[type=email], .form input[type=tel], .form input[type=url] { 
    width: 500px; 
    height: 27px;
    border: 1px solid #909090;
    border-radius: 3px; 
}
.form input[type=file] {
    width: 500px;   
}
.form select {
    width: 500px;
    height: 27px;
    line-height: 27px;
    padding: 3px 0 0 0;
    border: 1px solid #909090;
    border-radius: 3px; 
}
.form input[type="radio"] {
    margin: 5px 0 0 0;  
}
.form textarea { 
    float: left; 
    width: 500px; 
    height: 82px; 
    margin: 0 0 10px 0; 
    padding: 0; 
    font-size: 13px;
    border: 1px solid #909090; 
}
.form input[type="submit"] { 
    margin: 10px 0 20px 220px; 
    width: 100px; 
    height: 30px; 
    background: #FF6D1F; 
    text-align: center; 
    line-height: 30px; 
    color: #FFFFFF; 
    font-size: 13px; 
    font-weight: bold; 
    border: none;
    box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), 0 1px 0 #9FE662 inset; 
    border-radius: 5px;
    cursor: pointer;
}
.form input[type="submit"]:hover { 
    background: #FF822E;
}

input[type=text]:focus, textarea:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, input[type=email]:focus, select:focus, input[type=tel]:focus, input[type=url]:focus {
    background: #fff;
    border-color: #595959;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
    box-shadow: 0px 0px 6px 0px rgba(103, 102, 106, .7);
    outline: none;
}
#validation {
    background: #EAEAEA;
    width: 165px;
    height: 18px;
    /*opacity: .5;*/
    border: 1px solid #A69E7C;
    float: left;
    margin: -20px 0 0 -110px;
    padding: 7px 5px 10px 10px;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 0 2px #888;
    color: #000;
    line-height: 14px;
    position: relative;
    display: none;
}
input[type=radio] #validation {
    margin-left: -10px; 
}
.arrow {
    width: 14px;
    height: 15px;
    position: absolute;
    background: url(../images/arrow-down.png) no-repeat;
    bottom: -15px;
    left: 77px;
    z-index: 120;   
}

Javascript:

var submit = document.getElementById("submit");
submit.onclick = function() {
    var job_id = document.getElementById("job_id").value;
    var validation = document.getElementById("validation");
    var form = document.getElementById("form");


    if(job_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }   

    var start_date = document.getElementById("start_date").value;
    if(start_date == "") {
        validation.innerHTML = "Please, Enter the date";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }

    var deadline = document.getElementById("deadline").value;
    if(deadline == "") {
        validation.innerHTML = "Please, Enter the deadline";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
            validation.style.display = 'none';  
    }

    var finish_date = document.getElementById("finish_date").value;
    if(finish_date == "") {
        validation.innerHTML = "Please, Enter the finish date";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';
    }

    var budget = document.getElementById("budget").value;
    if(isNaN(budget)) {
        validation.innerHTML = "Enter Numeric Value here.";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

    }else if(budget == "") {
        validation.innerHTML = "Please, Enter the Budget";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
     }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
     }

     var client_id = document.getElementById("client_id").value;
     if(client_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var phone = document.getElementById("phone").value;
    if(isNaN(phone)) {
        validation.innerHTML = "Enter Numeric Value here.";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

    }else if(phone == "") {
        validation.innerHTML = "Please, Enter the Phone number";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
     }else if(phone.length < 7) {
            validation.innerHTML = "Phone Number should be at least 7 chars";
            arrow = document.createElement("div");
            arrow.className = 'arrow';
            validation.appendChild(arrow);
     }else if(phone.length > 11) {
            validation.innerHTML = "Phone Number should be at best 11 chars";
            arrow = document.createElement("div");
            arrow.className = 'arrow';
            validation.appendChild(arrow);
     }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
     }

    var email = document.getElementById("email").value;
    var atpos=email.indexOf("@");
    var dotpos=email.lastIndexOf(".");
     if(email == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, enter email address";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
        validation.innerHTML = "This is not a valid email address";
        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }
    else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var bidder_id = document.getElementById("bidder_id").value;
     if(bidder_id == "") {
        validation.style.display = 'block';
        validation.innerHTML = "ID cannot be left empty";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var num_supervisor = document.getElementById("num_supervisor").value;
     if(num_supervisor == "-1") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, select";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

    var odesk_link = document.getElementById("odesk_id").value;
    var tomatch= /^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/;
    if(odesk_link == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, Enter the url";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    } else if (tomatch.test(odesk_link)) {
        validation.innerHTML = "";
        validation.style.display = 'none';
        return true;
     }else {
        validation.style.display = 'block';
        validation.innerHTML = "This is not valid url";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);

        return false;
    }

     var owner_type = document.getElementById("owner_type").value;
     if(owner_type == "") {
        validation.style.display = 'block';
        validation.style.marginLeft = '0';
        validation.innerHTML = "Please, write something";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

     var message = document.getElementById("message").value;
     if(message == "") {
        validation.style.display = 'block';
        validation.innerHTML = "Please, write something";

        arrow = document.createElement("div");
        arrow.className = 'arrow';
        validation.appendChild(arrow);
    }else {
        validation.innerHTML = "";
        validation.style.display = 'none';  
    }

}

(c)The javascript for radio button, url link and textarea input didn't show the correct error message. I think, code for that section is okay, but what's the problem, I don't understand.

4
  • 4
    Why do you have 20+ div's with the same ID? Why are you surprised document.getElementById doesn't work when it returns one element and you have 20+ elements with that particular ID?
    – dsgriffin
    Commented May 9, 2013 at 21:40
  • this is too bad page design and too bad validation code.. just use validate.js here
    – Mehmet
    Commented May 9, 2013 at 22:03
  • yes, I want to use the same Id's div as same class. And so, I want the code for document.gteElementsByClassName instead of document.getElementById which I've used now(document.getElementById). I can't write code/loop for gteElementsByClassName And for that reason, I've written the post Commented May 9, 2013 at 22:25
  • okay, may be it's hard for getting idea about my problem because of big post. Tomorrow, I'll write it again shortly with more clear. Commented May 9, 2013 at 23:17

2 Answers 2

0

If you are okay with using jQuery as a js library, then here is a solution for you [for a) and b)]: http://jsfiddle.net/6fLNz/4/

Some comments:

  1. Never ever ever use one ID more than once.
  2. For javascript, you repeated the same code an awful lot of times; in that case you can make a kind of 'template function' with event handlers, so you don't have to retype the function everytime you want to launch it. Of course you will have to build specific functions for conditionals that don't evaluate with a !== or ===.
  3. I had a look at your project, and it really seems big enough to use jQuery or another JS library that might ease and speed up the development process.
  4. I put the input verification on .focusout event, so the user is immediatly notified of the error after he clicks/ shifts on another input. You can change line 22 input.on('focusout', function() to $('#submit').on('click', function() if you rather have the functions firing on click of the submit button.

jQuery function for reference:

$(document).ready(function() {
// First define user inputs
var inputs = [];
inputs[0] = $('#job_id');        // Job Id input
inputs[1] = $('#start_date');    // Start date input
inputs[2] = $('#deadline');      // Deadline input
// Add other inputs here like so => inputs[3] = $('#<input id>');

// Define the errors (error indexes must be the same as their inputs' indexes, eg errors[0] for inputs[0])
var errors = [];
errors[0]     = 'ID cannot be left empty';      // Job Id error
errors[1]     = 'Please enter the date';        // start date error
errors[2]     = 'Please enter the deadline';    // deadline error
// Add other errors here like so => errors[3] = $('#<input id>');

// These are the different validation patterns
var expressions = [];
expressions[0] = '';
expressions[1] = /regex/ ;

// Template function with event handlers
var showFormValidation = function showFormValidation(input, error, expression) {
    input.on('focusout', function() {
        if(input.val() == expression) {
            $(this).next('.validation').show();
            $(this).next('.validation').html(error);
            $(this).css({'box-shadow': '0 0 3px red',
                         '-moz-boxshadow': '0 0 3px red',
                        '-webkit-boxshadow': '0 0 3px red',
                         '-o-boxshadow': '0 0 3px red',
                         'border': '1px solid red'
                        });
        } else if(input.val() != expression) {
            $(this).next('.validation').hide();
            $(this).css({'box-shadow': 'none',
                         '-moz-boxshadow': 'none',
                        '-webkit-boxshadow': 'none',
                         '-o-boxshadow': 'none',
                         'border': '1px solid grey'
                        });
        }
    });
};
// This function will show the form validation for all input, if the input is == ''
for(i=0; i < errors.length; i++) { 
    showFormValidation( inputs[i], errors[i], expressions[0]);
}

});

5
  • Basically, I've poor knowledge at javascript and very poor knowledge at jquery. That's why, I wanted to use javascript instead of jQuery. (1)I knew that ID shouldn't use more than one time at a webpage. But, I can target the div by Id from javascript not by class. That's why, I define the div with ID for test only that my javascript work or not work. I've tested one by one input and give the screenshot too. I wanted help for targeting the div by class name from javascript. (2) Yes, there are are many codes to be repeated with many times. I don't know how can prevent the repeat. Commented May 10, 2013 at 12:39
  • (3) I added a div named .arrow to the .validation from javascript. arrow = document.createElement("div"); arrow.className = 'arrow'; validation.appendChild(arrow); How can I add this in your code? Commented May 10, 2013 at 12:42
  • ohh, can someone please, tell me how to add code and line break at comment section of stackoverflow? Commented May 10, 2013 at 12:46
  • Have some patience I'll update my answer when I have some time. But honestly, since your validation div is hidden, you can just create an arrow inside it with position: absolute; and it will show up and disappear together with the .validation div. That will also be a less memory-intensive solution than adding it dynamically. Inline comment code is written between these characters ´´ (but then the opposite; can't type it else it won't show up
    – webketje
    Commented May 10, 2013 at 13:53
  • thanks.Hope,you'll write it when you get time so I can understand clearly.Another thing that multiple error message can be stay for a input.For example,at my javascript code,if people don't input, they got a error message "Please, enter the phone number" if they give 3 number as a input,they got "Phone Number should be at least 11 character",if they give more than 11 digit, they got "Phone Number should be at best 11 character".Similar things are stayed for email etc.So, for an input id,how can I implement multiple error message.Hope,you'll write all when you get time at today.Thanks 4 ur time Commented May 10, 2013 at 14:04
0

I'm posting a new answer as this one is much more specific and sophisticated. However please read the bold note:

The code I have written here could almost be defined as a jQuery error validation plugin. Ultimately, for developing a polyvalent application which needs advanced errordisplay functions & others, you should really learn a javascript framework (like Ext.js, jQuery, jQuery UI[ a framework of a framework!], YUI, etc...) or master javascript to an at least advanced extent.

What the new function does:

  1. Check if input is empty [& display error]
  2. If input is not 1., check if input is shorter than given length [& display error]
  3. If input is not 2., check if input is longer than given length [& display error]
  4. If input is not 3., check if input has the specified string [& display error]
  5. If input is not 4., check if input has the specified regex pattern [& display error]
  6. If input passes all tests, error is hidden.

Now this comes at a cost: For each function launch, you will have to specify 10 parameters, like this: function showFormValidation(input, errorBlank, minLength, errorminLength, maxLength, errormaxLength, find, errorFind, regex, errorRegex)

  • input is the input id from which to compare the value to
  • minLength and maxLength should be 2 integers (or null)
  • regex should be a // -enclosed regex pattern and find should be a string (eg. 'mail')
  • All parameters prefixed by 'error' are the errormessages to show when the preceding parameter is true (eg errorminLength will display if input is shorter than minLength)
  • If you don't want to test against certain values, set the parameters to null

For examples, look at the 3 last lines of the embedded code in this post.

Here is the new jQuery code (it is applied to the 3 first inputs of the fiddle here: http://jsfiddle.net/6fLNz/5/

$(document).ready(function() {
    // First define user inputs
    var inputs = [];
    inputs[0] = $('#job_id');        // Job Id input
    inputs[1] = $('#start_date');    // Start date input
    inputs[2] = $('#deadline');      // Deadline input
    // Add other inputs here like so => inputs[3] = $('#<input id>');

    // Define the errors (error indexes must be the same as their inputs' indexes, eg errors[0][0][0] for inputs[0])
    var errors = [];
    errors[0] = [];
    errors[1] = [];
    errors[2] = [];
    var blank = 0;
    var length = 1;
    var indexof = 2;
    // errors when input = empty
    errors[blank][0]     = 'ID cannot be left empty';      // Job Id error
    errors[blank][1]     = 'Please enter the date';        // start date error
    errors[blank][2]     = 'Please enter the deadline';    // deadline error
    errors[blank][3]     = 'You haven\'nt chosen an ownertype'; // ownertype radiobutton error
    // errors when not enough chars or too many chars
    errors[length][0]    = 'Your message must be at least x characters in length.';
    errors[length][1]    = 'Your message must be at most x characters in length.';
    // errors when input doesn't contain a certain string
    errors[indexof][0]   = 'Your message doesn\'t contain the necessary characters';

    // Template function with event handlers
    var showFormValidation = function showFormValidation(input, errorBlank, minLength, errorminLength, maxLength, errormaxLength, find, errorFind, regex, errorRegex) {

        input.on('focusout', function() {
            var errorVisible = function errorVisible(error) {
                if(error !== null) {
                input.next('.validation').show();
                input.next('.validation').html(error);
                input.css({'box-shadow': '0 0 3px red',
                            '-moz-boxshadow': '0 0 3px red',
                            '-webkit-boxshadow': '0 0 3px red',
                            '-o-boxshadow': '0 0 3px red',
                            'border': '1px solid red'
                            });
                }
            };
            var errorHidden = function errorHidden() {
            input.next('.validation').hide();
                    input.css({'box-shadow': 'none',
                                 '-moz-boxshadow': 'none',
                                '-webkit-boxshadow': 'none',
                                 '-o-boxshadow': 'none',
                                 'border': '1px solid grey'
                                });
            };
            if(input.val() == '') {                                                     // shows error if input is empty
                errorVisible(errorBlank);
            } else if(input.val() != '') {
                errorHidden();
                if(input.val().length < minLength && minLength != null) {               // shows error if input is shorter than 'minLength' characters
                    errorVisible(errorminLength);
                } else if(input.val().length >= minLength || minLength == null) {
                    errorHidden();
                    if(input.val().length > maxLength && maxLength != null) {           // shows error if input is longer than 'maxLength' characters
                        errorVisible(errormaxLength);
                    } else if (input.val().length <= maxLength || maxLength == null) {
                        errorHidden();
                        if(input.val().indexOf(find) == -1 && find != null) {           // shows error if string 'find' is not found in the input.val()
                            errorVisible(errorFind);
                        } else if(input.val().indexOf(find) != -1 || find == null) {
                            errorHidden();
                            if(!input.val().match(regex) && regex != null) {            // shows error if string doesn't follow a certain regex pattern
                                errorVisible(errorRegex);
                            } else if(input.val().match(regex) || regex == null) {
                                errorHidden();
                            }
                        };
                    };
                };
            };
        });
    };


    showFormValidation(inputs[0], errors[blank][0], 4, errors[length][0], null, null, 'mailto', errors[indexof][0], null, null );
    showFormValidation(inputs[1], errors[blank][1], 6, errors[length][0], 6, errors[length][1], null, null, null, null );
    showFormValidation(inputs[2], errors[blank][2], null, null, null, null, null, null, /\//i, 'wrong regex');
});

I chose the put the error messages collectively in arrays, but you can also enter the strings directly as function parameters.

Cheers.

2
  • sorry for late reply. It's working on jsfiled but not at my local files: abidhasan.zxq.net/firm/test_form.html Can't I use the javascript at my custom_script.js? Commented May 14, 2013 at 16:39
  • It's not working for this reason: You haven't included the jQuery library in your document's head. Include in head: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>. Also, you should open your $(document).ready(function(){ at the very first line of your js document, and close it at the last with });. ah and, your custom_js must be included after the jquery library in your HTML. By the way here's the new demo: jsfiddle.net/6fLNz/6 To test it, enter in the Job Id input consecutively: nothing, 3 letters, 6 letters, mailto
    – webketje
    Commented May 14, 2013 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.