jeudi 5 mai 2016

creating custom logic for focusing html elements while validating form

I have been stuck in somewhere around validating the form. I have a nice 10-11 fields in my .cshtml page in MVC. Those fields are using data anotations from model and here I am using client side validations using jquery and unobtrusive javascript. So, validations are firing up very good on submit but we need to implement a logic where a user will click on the submit button but the page will automatically drags the user to the location of mandatory field.

Assume that all 11 fields in my form are mandatory. user has filled the first two and left the third blank .So on submitting the form, the cursor should focus to that control with the validation message.Due to the length of the page, it should be scrolling up and down accordingly. And if suppose only first two fields are filled and others are empty, the validation message should show the 3rd field with the focus on control and then if user filled the 3rd field and hit save, it should focus to the fourth field.

On one instance it looks easy and I am trying it with following code snippet on click of submit button.

AS this is the class which mvc uses when validation fires, I select element from the first class like below:

 var element = $('#' + $('.input-validation-error:first').attr('id'));

once I get the element then I am using the below code:

 if (element.selector !== '#undefined') {

// The class "RequiredFeildDropdown" is applied to the control so that I can
 check if that is kendo dropdown and I should focus to that kendo control of the element.

        if (element.hasClass("RequiredFeildDropdown")) {
            element.data("kendoDatePicker").element.focus();
        }

// This class "RequiredFeildDate" has been applied to check whether the kendo control is datepicker
so that I can focus it.

        else if (element.hasClass("RequiredFeildDate")) {
            element.data("kendoDropDownList").focus();
        }

// So here comes the real problem.The primaryaddressData contains the collection of objects. Actually my page also consists of some table elements that i have created using for loop.

So, while validating , if primaryaddressData.length have count < 1, this div should show.Actually there should be atleast one primary address. The div which have table elemets is "primaryaddressErrorMessage"

 else {
        if (primaryaddressData.length >= 1) {
            $("#primaryaddressErrorMessage").hide();
        } else {
            $("#primaryaddressErrorMessage").show();
            $('html,body').animate({
                scrollTop: $("#primaryaddressErrorMessage").offset().top
            }, 'slow');
            isValid = false;
        }

        element.focus();

I am going very hard through this. There might be someone who has also faced this problem in past. So, it could be a duplicate question but I asked it for this particular scenario. Please let me know if some more explanation is required.

Aucun commentaire:

Enregistrer un commentaire