asked on

Validate Array Inputs on DataTable using On Blur or Similar

Hello Experts!

I need help on the following:

I have a DataTable that is populated via AJAX. The're are four columns with text inputs for scores. So, each row has some associated text inputs to it (CA1, CA2, CA3 and Exam). The maximum scores for these inputs are 10, 10, 10 and 70 respectively.

I've already put in place a server-side validation that checks all these values. Now, I want a client side validation. Something like onblur or onkeyup for each input. I want an alert to trigger and inform the user of wrong input and focus / and add error class (border-color: red) on such input box immediately not until the submit button is clicked.

I believe it's easy for guru but I'm still learning. Thanks to Experts on EE.

On a single column input, I tried this but no luck.

<script>
function checkValue() {
  var value = document.getElementsByName('cass1[]');
     for (i=0; i<value.length; i++)
	 {
	    if (value[i].value > 10)
               {
	          alert('The value is gtreater than 10');		
	          return false;
	       }
         }
}
</script>

{
    orderable: false,
    "className": "table-readonly",
    render: function (data, type, row) {
    return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control input-sm" type="text" maxlength="2" name="cass1[' + row.Enroll_ID + ']" onkeyup="checkValue()" value="' + row.CA1 + '" ' + getReadonly() + '>';
	}
}

Open in new window

Here is my code:

var myDt = $('#assessmentTable').DataTable({

            "paging": false,
            columns : [
            { data : 'Roll_No'},
            { data : 'Student_ID'},
            { data : 'Student_Name'},
            {
            	orderable: false,
            	render: function (data, type, row) {
            		return '<input class="form-control input-sm" type="text" maxlength="2" size="6" name="cass1[' + row.Enroll_ID + ']" value="' + row.CA1 + '" ' + getReadonly() + '>';
            	}
            },
            {
            	orderable: false,
            	render: function (data, type, row) {
            		return '<input class="form-control input-sm" type="text" maxlength="2" size="6" name="cass2[' + row.Enroll_ID + ']" value="' + row.CA2 + '" ' + getReadonly() + '>';
            	}
            },
            {
            	orderable: false,
            	render: function (data, type, row) {
            		return '<input class="form-control input-sm" type="text" maxlength="2" size="6" name="cass3[' + row.Enroll_ID + ']" value="' + row.CA3 + '" ' + getReadonly() + '>';
            	}
            },
            {
            	orderable: false,
            	render: function (data, type, row) {
            		return '<input type="hidden" name="id[]" value="' + row.Enroll_ID + '"><input class="form-control input-sm" type="text" maxlength="2" name="exam[' + row.Enroll_ID + ']" value="' + row.Exam + '" ' + getReadonly() + '>';
            	}
            }
            
            ]

        });

Open in new window

If you need more information, I'll gladly provide.

Zakaria Acharki

You could attach the input event to track the user inputs to the first three inputs using the name attribute and the start with selector, then check if the value match 10 and add/remove the invalid class to the current input, and then do the same for the fourth input and check for 70.

using addEventListener() it will be something like :

var inputs = document.querySelectorAll("input[name^='cass']" );

var checkValue = function() {
    if( this.value > 10) {
         this.classList.add('invalid');
         alert('The value is gtreater than 10');
    }else{
         this.classList.remove('invalid');
    }
};

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('input', checkValue, false);
}

Open in new window

The CSS class could be simple as :

input.invalid{
    color: red;
}

Open in new window

Opeyemi AbdulRasheed

ASKER

I tried it but no luck. Perhaps, I don't know how to call it. I used onkeyup later changed it to onblur. Both didn't fire.

Zakaria Acharki

You don't need to call it from the HTML part, Here is a pure JS simple :

http://jsfiddle.net/z_acharki/nrz5gpvx/

Since you're using the datatable I think you're able to use jQuery, here is a sample using jQuery :

http://jsfiddle.net/z_acharki/9fqyndph/1/

Opeyemi AbdulRasheed

ASKER

For some reasons I cannot figure out, I still can't get it to work despite following your examples at jsfiddle.
I added this to the page just before the </body> tag:

<script>
	function checkValue(max) {
		var currentInput = $(event.target);

		if ( currentInput.val() > max) {
			alert('The value is gtreater than '+max);

			currentInput.addClass('invalid');
		} else {
			currentInput.removeClass('invalid');
		}
	};
</script>

Open in new window

And added the following to the document.ready:

$("input[name^='cass']").on('blur', function() {
  			checkValue(10);
  		});

  		$("input[name^='exam']").on('blur', function() {
  			checkValue(70);
  		});

Open in new window

I equally added the css to the page.

I even added this to the document.ready part no luck:

function checkValue(max) {
			var currentInput = $(event.target);

			if ( currentInput.val() > max) {
				alert('The value is gtreater than '+max);

				currentInput.addClass('invalid');
			} else {
				currentInput.removeClass('invalid');
			}
		};

Open in new window

Please could it be the way I'm populating my DataTable? Using rendering?

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Opeyemi AbdulRasheed

ASKER

Excellent! You nailed it. However, the focus moves to the next input. Can we make it clean the wrong input and focus on the textbox? That would be a definite improvement.

Thank you so much

Opeyemi AbdulRasheed

ASKER

Thanks. I added this:

currentInput.focus().select();

Open in new window

Zakaria Acharki

Good job brother, I'm sorry for the delay, I've just seen your comment..

Opeyemi AbdulRasheed

ASKER

Alright, sir. Thanks for your help