4

I am new in javascript. I want to validating a form with five columns.

FormDescription

My Form Contain 5 input fields and one submit buttom enter image description here

I want following output

1.Initially submit button disabled.

2.All fields are enter button will be enabled.

or else

1.displaying a alert box.. such as "All fields are must be enter"

Thank You.

  • How does it relates to SharePoint? Is it a list form? – Arsalan Adam Khatri Nov 28 '12 at 5:43
  • sorry my question in wrong place. it is not relate to sharepoint. i got the answer – Kader-timon Nov 28 '12 at 10:30
3

If it is SharePoint List form, you can simply make the fields as Required and SharePoint will handle it...

But if its some other form, which I think it is... you can use JavaScript like this:

<script type="text/javascript">
function onSubmitValidation() {
   if (TrimAll(document.getElementById("field1").value) == "") {
       alert('All fields are must be enter');
       return false;
   }
   if (TrimAll(document.getElementById("field2").value) == "") {
       alert('All fields are must be enter');
       return false;
   }
   // check for rest of the fields - field3, field4, field5

   return true;
}

function TrimAll(s) {
    var l = 0; var r = s.length - 1;
    while (l < s.length && s[l] == ' ')
    { l++; }
    while (r > l && s[r] == ' ')
    { r -= 1; }
    return s.substring(l, r + 1);
}
</script>

HTML can look like:

Fields <input type="text" id="field1" /><input type="text" id="field2" /><input type="text" id="field3" /><input type="text" id="field4" /><input type="text" id="field5" />

<asp:Button ID="btnSubmit" Text="Submit" OnClientClick="onSubmitValidation" OnClick="btnSubmit_Click" />

However if you want to utilize input fields in Server-Side code then replace <input with <asp:TextBox

Javascript change:
Replace document.getElementById("field1").value with document.getElementById("<%= field1.ClientID %>").value

HTML change:
Replace <input type="text" id="field1" /> with <asp:TextBox ID="field1" runat="server" />

1
function button_action(){
    if(!document.myform.field1.value)
    {
        alert("enter fields1");
        document.myform.field1.focus();
        return false;
    }
        if(!document.myform.field2.value)
    {
        alert("enter fields2");
        document.myform.field2.focus();
        return false;
    }
        if(!document.myform.field3.value)
    {
        alert("enter fields3");
        document.myform.field3.focus();
        return false;
    }
        if(!document.myform.field4.value)
    {
        alert("enter fields4");
        document.myform.field4.focus();
        return false;
    }
        if(!document.myform.field5.value)
    {
        alert("enter fields5");
        document.myform.field5.focus();
        return false;
    }


alert("congrats");
}
<form name="myform">

<input type="text" name="field1" size="10" />
<input type="text" name="field2" size="10" />
<input type="text" name="field3" size="10" />
<input type="text" name="field4" size="10" />
<input type="text" name="field5" size="10" />


<input type="button" value="submit" onclick="button_action()" />

</form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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