Geek Answers Handbook

Show or identify and focus the hidden required field when submitting the form

The script . I have a form with several accordions (which are extensible divs), each of which has some required fields, the user can expand or expand them, so in some cases the required hidden fields are not filled (because it crashes) when the form is submitted.

Problem . In Chrome, no errors appear to the user, only in the console, which you can read:

Invalid form control using name = '' is not custom.

I have found many answers on this issue. I know exactly why this is happening, but I have not found a solution to my problem.

What have I tried . Before submitting the form, expand all accordions to make all required fields visible so that I can allow the browser to focus the element and show the required field . (see update)

Desired solution : indicate the identifier of the required field for which content is required in order to expand its accordion container and focus the field

UPDATE : The solution found that the extension of all javascript expandable div files does not work in all cases, so it is NOT a solution.

QUESTION : Is there a way to show the field before validation? If not ... Can I focus or identify the hidden required field when submitting the form.

+4
2

Niet the Dark Absol ( , ).

, , , , JavaScript. , , ( IE FF , ); , .

, HTML5. , onsubmit , submit. /, click , .

, jQuery UI Bootstrap, ( , / ):

JQUERY UI ACCORDION

jQuery UI JSFiddle: http://jsfiddle.net/ma8v32ug/1/. JavaScript :

// save the accordion in a variable as you'll need it later
$accordion = $("#accordion").accordion();

// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {

    // traverse all the required elements looking for an empty one
    $("#myForm input[required='required']").each(function() {

        // if the value is empty, that means that is invalid
        if ($(this).val() == "") {

            // find the index of the closest h3 (divide by 2 because jQuery UI accordion goes in pairs h3-div. A bit hacky, sorry)
            var item = $(this).closest(".ui-accordion-content").prev().index() / 2;

            // open that accordion section that contains the required field
            $accordion.accordion("option","active", item);

            // stop scrolling through the required elements
            return false;
        }
    });
});

BOOTSTRAP ACCORDION

: 3.3.4 Bootstrap. .

, Bootstrap, , .collapse({toggle: true}), , , ( , , , ).

, .in . , , jQuery, :

// when the submit is clicked
$("#myForm input[type='submit']").on("click", function(event) {

    // traverse all the required elements looking for an empty one
    $("#myForm input[required='required']").each(function() {

        // if the value is empty, that means that is invalid
        if ($(this).val() == "") {

            // hide the currently open accordion and open the one with the invalid field
            $(".panel-collapse.in").removeClass("in");
            $(this).closest(".panel-collapse").addClass("in").css("height","auto");

            // stop scrolling through the required elements
            return false;
        }
    });
});

, JSFiddle: http://jsfiddle.net/ma8v32ug/2/

+4

, , , , . XD. , , , .

, , change . , - , .

, .

, , HTML5, , .

+4

More articles:


All Articles