Add Error Class to all Inputs with Zero Values in a DataTable

Opeyemi AbdulRasheed
Opeyemi AbdulRasheed used Ask the Experts™
on
Hello Experts!

I need help on the following:

Currently, I'm using onblur to do client-side validation on DataTable inputs using this:
$("body").on('blur', 'input[name^="cass"]', function() {
	checkCA(10);
});

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

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

	if ( currentInput.val() > max) {

		toastr.error('CA Scores cannot be greater than '+max);
		urrentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

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

	if ( currentInput.val() > max) {

		toastr.error('Exam Scores cannot be greater than '+max);
		currentInput.addClass('invalid');
		} else {
		currentInput.removeClass('invalid');
		}
};

Open in new window

Now, I want to check Zeros but not onblur. User may not click on a particular input so onblur will not work. I want the border highlighted after the submit button is clicked so as to draw user's attention to the Zero value.

Actually, Zeros are allowed but I still want to show them. If they left it on purpose, it's okay. But what if it was a mistake? That's why I want it highlighted. After all, all inputs will still be available after submit.

Thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Developer
Distinguished Expert 2018
Commented:
Hi AbdulRasheed,

Try to add the check inside the submit event, something like :

$("form").on('submit', function () {
    $('input[name^="cass"],input[name^="exam"]').each(function(){
         if( $(this).val() == 0 ){
              $(this).addClass('error_class');
        }
    });
});

Open in new window

Thank you so much, brother
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Glad to help brother.
Please, do you suggest I change all other codes where I used same methods to populate DataTable?
I mean change this:
myTable.clear().draw();
myTable.rows.add(data).draw();

Open in new window

To:
myTable.clear();
myTable.rows.add(data.data);
myTable.draw();

Open in new window

?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial