Javascript custom validation

Question

I'm writing a custom javascript validation script whereby i iterate through all input elements in a div named 'toggle' and select each that has a class named 'required' and if the value of the element is an empty string (empty) then i need to create labels containing the error message and place them right next to the textbox.

Here's the code:

function clientErrMsgs() {
        var container = document.getElementById("toggle");
        var inputArray = container.getElementsByTagName("input");
        for (var i = 0; i < inputArray.length; i++) {
        alert("");
            if (inputArray[i].getAttribute("class") == "required" && inputArray[i].value == "") {
                var errmsg = inputArray[i].getAttribute("data-errormessage");
                var labelErr = document.CreateElement('label');
                labelErr.id = "ErrMsg" + i;
                labelErr.value = errmsg;
                var parent = inputArray[i].parentNode;
                parent.appendChild(labelErr);
                }
            }
        }

the program executes well (tested it with alert()) up until the following line:

var labelErr = document.CreateElement('label');

Where is the problem?

you have a lot of good answers below. Did one of them help you? Consider marking one of them as the answer. — James Hill
– James Hill, Commented Jun 28, 2011 at 11:55
Refer this URL for custom validations stackoverflow.com/questions/53881655/… — Googlian
– Googlian, Commented Jan 8, 2019 at 19:41

Gaurav Agrawal · Accepted Answer · 2011-06-24 11:27:45Z

1

you can use asp.net custom validator to do this

i am giving you an example, how to do this....

 <asp:CustomValidator ID="CustomValidator1" runat="server" 
ErrorMessage="Sms length is exceeding over 160." 
ClientValidationFunction="validateLength" ControlToValidate="txtSmsMessage" 
SetFocusOnError="True" ValidationGroup="add">*</asp:CustomValidator>

<script language="javascript" type="text/javascript">
    function validateLength(oSrc, args)
    {
        args.IsValid = (args.Value.length < 160);
    }
</script>

i suggest please try this...

answered Jun 24, 2011 at 11:27

Gaurav Agrawal

4,44110 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johan Over a year ago

hah, i am not allowed to use the built-in validation controls. I was told by my superior they are for amateur :) -- no offence tho.. I went for them aswell heh

Gaurav Agrawal Over a year ago

label converted into span into html so please try this var labelErr = document.createElement('span');

Alex · Accepted Answer · 2011-06-24 11:33:12Z

0

I got things working with:

http://jsfiddle.net/ahallicks/kxPeN/2/

labels don't have a value attribute

answered Jun 24, 2011 at 11:33

Alex

7,3441 gold badge21 silver badges31 bronze badges

Comments

codeandcloud · Accepted Answer · 2011-06-24 11:34:29Z

0

Its document.createElement not ~~document.CreateElement~~

MDC link : document.createElement

Update: you should access the innerHTML of the label and not the value

The snippet

var labelErr = document.createElement('label');
labelErr.id = "ErrMsg" + i;
labelErr.innerHTML= errmsg;
var parent = inputArray[i].parentNode;
parent.appendChild(labelErr);

edited Jun 24, 2011 at 11:34

answered Jun 24, 2011 at 11:22

codeandcloud

55.6k47 gold badges169 silver badges259 bronze badges

1 Comment

Johan Over a year ago

okay, that went through. Now after I create a label i can't seem to add a value for its 'id' attribute?

James Hill · Accepted Answer · 2011-06-24 11:37:13Z

0

This is not a direct answer to your question, but would your superior go for a different pre-built validation method? I'm partial to FlowPlayers jQuery based validator. Very simple to setup:

$("#myform").validator();

I've written several validation frameworks in the past. I finally got tired of reinventing the wheel.

answered Jun 24, 2011 at 11:37

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

Comments

mplungjan · Accepted Answer · 2011-06-24 11:48:28Z

0

May I suggest this:

function clientErrMsgs() {
  var container = document.getElementById("toggle"); 
  var inputArray = container.getElementsByTagName("input");
  for (var inp, i=0, n=inputArray.length; i<n; i++) {
    inp = inputArray[i];
    if (inp.getAttribute("class") === "required") {
      var errMsg = container.getElementById("ErrMsg"+i);
      if (!errMsg) {
         errMsg = document.createElement('span');
         errMsg.id = "ErrMsg" + i;
         errMsg.innerHTML= inp.getAttribute("data-errormessage");
         inp.parentNode.appendChild(errMsg);      
      }
      errMsg.style.display= (inp.value === "")?"":"none"
    }
  }
}

answered Jun 24, 2011 at 11:48

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

Javascript custom validation

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest