Validation Code in Javascript

Question

1.00/5 (1 vote)

See more:

Hi all,
My requirement is simple.
* I have a grid in my page with 3 columns, From Time and To Time.
* When I click a button above the grid, I have got to open a modal popup window.
* In the popup, I have 4 dropdowns - From Hours, From Minutes, To Hours and To Minutes.
* Consider, I select 08(From Hours), 40(From Minutes) and 09(To Hours), 20(To Minutes.)
* I click the add button. The popup closes, and the above selected values are populated in the grid as

FromTime ToTime
08-40 09-20

* Now, when I want to enter another set of values, I have to validate as follows.
The new time should be more than the ones already present in the grid. (The 2nd set of data can start with 09-20 to .. though.)
* Example, if I choose times 09-00 to 09-30, I should get an alert and the popup should stay as it is. When I enter correct values(say 09-20 to 10-00) the popup should close and the values should be added to the grid.

Can someone provide me a solution for this? It is urgent, my job is at stake ..

P.S. My code, which doesn't work the way I want it to.

JavaScript

function validateTime() {
            var table = document.getElementById('<%=gvTimeSlots.ClientID%>');
            var Row;
            var oldFromTime, oldToTime;
            var oldFT, oldTT;
            var oldFromHour, oldFromMin, oldToHour, oldToMin;
            var newFromHour, newFromMin, newToHour, newToMin;
            var newFromTime, newToTime;
                for (var i = 1; i < table.rows.length; i++) {
                Row = table.rows[i];
                oldFT = new Array();
                oldTT = new Array();
                oldFromTime = Row.cells[4].innerText;
                oldToTime = Row.cells[5].innerText;
                oldFT = oldFromTime.split("-");
                oldTT = oldToTime.split("-");
                oldFromHour = oldFT[0];
                oldFromMin = oldFT[1];
                oldToHour = oldTT[0];
                oldToMin = oldTT[1];
                oldFromTime = parseInt(oldFromHour * 60) + parseInt(oldFromMin);
                oldToTime = parseInt(oldToHour * 60) + parseInt(oldToMin);
                if(('<%= cboFromTimeHours.SelectedValue%>') >= 0 && (('<%= cboFromTimeHours.SelectedValue%>')) < 10){
                newFromHour = "0" + ('<%= cboFromTimeHours.SelectedValue%>');
                }
                else{
                newFromHour = ('<%= cboFromTimeHours.SelectedValue%>');
                }
                newFromMin = ('<%= cboFromTimeMins.SelectedValue%>');
                newFromTime = parseInt(newFromHour * 60) + parseInt(newFromMin);
                if (('<%= cboToTimeHours.SelectedValue%>') >= 0 && (('<%= cboToTimeHours.SelectedValue%>')) < 10) {
                newToHour = "0" + ('<%= cboToTimeHours.SelectedValue%>');
                }
                else {
                newToHour = ('<%= cboToTimeHours.SelectedValue%>');
                }
                newToMin = ('<%= cboToTimeMins.SelectedValue%>');
                newToTime = parseInt(newToHour * 60) + parseInt(newToMin);
                if (newFromHour < oldFromHour || newFromHour < oldToHour){
                    alert("do not add.");
                    return false;
                }
            }
        }

Posted 11-Apr-13 22:52pm

Aish P Karthi

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nick Fisher (Consultant) · Answer 1 · 2013-04-12T02:21:00

If clicking the button simply adds a new row, then why do you have to loop through the whole table every time to check all the values? Surely you can just store the last value entered in a global variable and check against that value every time a new one's entered.

Like:

JavaScript

var oldToTime = 0;

function validateTime() {
    var NFH = document.getElementById('<%=cboFromTimeHours.ClientID%>');
    var NFM = document.getElementById('<%=cboFromTimeMins.ClientID%>');
    var NTH = document.getElementById('<%=cboToTimeHours.ClientID%>');
    var NTM = document.getElementById('<%=cboToTimeMins.ClientID%>');

    var newFromHour, newFromMin, newToHour, newToMin, newFromTime, newToTime;

    // now get the new 'from' time
    if ((NFH.options[NFH.selectedIndex].text >= 0) && (NFH.options[NFH.selectedIndex].text) < 10) {
        newFromHour = "0" + NFH.options[NFH.selectedIndex].text;
    }
    else {
        newFromHour = NFH.options[NFH.selectedIndex].text;
    }

    // and 'from' minutes
    newFromMin = NFM.options[NFM.selectedIndex].text;

    // combine to get minutes past midnight
    newFromTime = parseInt(newFromHour * 60) + parseInt(newFromMin);


    // now get the new 'to' time
    if ((NTH.options[NTH.selectedIndex].text >= 0) && (NTH.options[NTH.selectedIndex].text) < 10) {
        newToHour = "0" + NTH.options[NTH.selectedIndex].text;
    }
    else {
        newToHour = NTH.options[NTH.selectedIndex].text;
    }

    // and 'to' minutes
    newToMin = NTM.options[NTM.selectedIndex].text;

    // combine to get minutes past midnight
    newToTime = parseInt(newToHour * 60) + parseInt(newToMin);

    alert('new from:' + newFromTime + ', new to:' + newToTime + ', old:' + oldToTime);

    // check new times are valid
    if (!((newToTime > newFromTime) && (newFromTime >= oldToTime))) {
        alert("do not add.");
        return false;
    }
    else {
        alert('ok, time is valid');
        oldToTime = newToTime;
        return true;
    }
}

Form code:

ASP.NET

<form runat="server">

    From H:<asp:DropDownList ID="cboFromTimeHours" DataValueField="TIME_ID" DataTextField="TIME_DESC" runat="server"></asp:DropDownList>
    <br />
    From M:<asp:DropDownList ID="cboFromTimeMins" DataValueField="TIME_ID" DataTextField="TIME_DESC" runat="server"></asp:DropDownList>
    <br />
    To H:<asp:DropDownList ID="cboToTimeHours" DataValueField="TIME_ID" DataTextField="TIME_DESC" runat="server"></asp:DropDownList>
    <br />
    To M:<asp:DropDownList ID="cboToTimeMins" DataValueField="TIME_ID" DataTextField="TIME_DESC" runat="server"></asp:DropDownList>
    <br />

    <asp:Button OnClientClick="validateTime(); return false;" Text="Click" runat="server"/>

</form>

Code behind:

C#

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt;

    DataRow unSelected;

    dt = new DataTable();

    dt.Columns.Add("TIME_ID", typeof(String));
    dt.Columns.Add("TIME_DESC", typeof(String));

    for (int i = 1; i < 13; i++)
    {
        unSelected = dt.NewRow();
        unSelected["TIME_ID"] = i;
        unSelected["TIME_DESC"] = i;

        dt.Rows.InsertAt(unSelected, dt.Rows.Count);
    }

    cboFromTimeHours.DataSource = dt;
    cboFromTimeHours.DataBind();

    cboToTimeHours.DataSource = dt;
    cboToTimeHours.DataBind();

    dt = new DataTable();

    dt.Columns.Add("TIME_ID", typeof(String));
    dt.Columns.Add("TIME_DESC", typeof(String));

    for (int i = 0; i < 60; i++)
    {
        unSelected = dt.NewRow();
        unSelected["TIME_ID"] = i;
        unSelected["TIME_DESC"] = i;

        dt.Rows.InsertAt(unSelected, dt.Rows.Count);
    }

    cboFromTimeMins.DataSource = dt;
    cboFromTimeMins.DataBind();

    cboToTimeMins.DataSource = dt;
    cboToTimeMins.DataBind();
}

E.F. Nijboer · Answer 2 · 2013-04-11T23:12:00

Solution 1

Are you really sure you want to use the server value '<%= cboFromTimeHours.SelectedValue%>' here? Don't you want the actual value selected?

Good luck!

Posted 11-Apr-13 23:12pm

E.F. Nijboer

Aish P Karthi · Answer 3 · 2013-04-11T23:13:00

Solution 2

Hi Nijboer, it would be good that way too..! But somehow I am not able to get the validation right. It is a total failure.

Posted 11-Apr-13 23:13pm

Aish P Karthi

Aish P Karthi · Answer 4 · 2013-04-24T01:24:00

All right, I have solved this at last. Here goes my code.

XML

function validateTime(source,arguments) {
            var fnSuccess = 0;
            var table = document.getElementById('<%= gvTimeSlots.ClientID%>');
            var gvRowCount = table.rows.length;
            var Row;
            var oldFromTime, oldToTime;
            var oldFT, oldTT;
            var oldFromHour, oldFromMin, oldToHour, oldToMin;
            var newFromHour, newFromMin, newToHour, newToMin;
            var newFromTime, newToTime;
            for (var i = 1; i < table.rows.length; i++) {
            //var i = table.rows.length - 1;
                Row = table.rows[i];
                oldFT = new Array();
                oldTT = new Array();
                oldFromTime = Row.cells[4].innerText;
                oldToTime = Row.cells[5].innerText;
                oldFT = oldFromTime.split("-");
                oldTT = oldToTime.split("-");
                oldFromHour = oldFT[0];
                oldFromMin = oldFT[1];
                oldToHour = oldTT[0];
                oldToMin = oldTT[1];

                oldFromTime = parseInt(oldFromHour * 60) + parseInt(oldFromMin);
                oldToTime = parseInt(oldToHour * 60) + parseInt(oldToMin);

                newFromHour = document.getElementById('<%= cboFromTimeHours.ClientID%>');
                newFromMin = document.getElementById('<%= cboFromTimeMins.ClientID%>');
                //if (newFromHour.value > 12) {
                //    newFromHour=((parseInt(newFromHour.value)) * 60) + parseInt(newFromMin.value);
                //    alert(newFromHour);
                //}

                newFromTime = parseInt(newFromHour.value * 60) + parseInt(newFromMin.value);

                newToHour = document.getElementById('<%= cboToTimeHours.ClientID%>');
                newToMin = document.getElementById('<%= cboToTimeMins.ClientID%>');
                newToTime = parseInt(newToHour.value * 60) + parseInt(newToMin.value);


                //if ((oldFromTime <= newFromTime) && (oldToTime >= newFromTime) && ((oldToTime <= newToTime) && (oldFromTime >= newToTime))) {
                if ((oldFromTime >= newFromTime) && (oldToTime > newFromTime)) {
                    arguments.IsValid = false;

                }
                else {
                    arguments.IsValid = true;

                }
            }


        }

I had a custom validator to avoid postback on unsuucessful validation.

Validation Code in Javascript

4 solutions

Solution 3

Solution 1

Solution 2

Solution 4

Add your solution here

Preview 0