form validation

Question

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

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.

Answer 1

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" />

Answer 2

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>