如果未选中元素，则需要帮助防止表单提交

Question

I wrote a small script the prevents the form from being submitted if an input field (checkbox or radio) has not been selected. The script only targets the input field with the attribute "required". However since my form varies from page to page (depending on what link the user selects) not all options required.

The form that I am including the jquery script is on one form since it is dynamic.

I have wrote the script below which does the job

  $('#item_form').submit(function() {
            var ok = $('input[id*=\"required\"]').is(':checked');
            $('#error').toggle(!ok);
            $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
            return ok;
        });
    });

But the challenge that I am facing having it work only if there is a required attribute. I have wrote the following code below but it doesn't seem to be working for me. Here is what I wrote

   $.fn.exists = function () {
        return this.length !== 0;
    }

        $('#item_form').submit(function() {
            var req = $('input[id*=\"required\"]');
            if(req.exists()){
            var ok =  req.is(':checked');
            $('#error').toggle(!ok);
            $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
            return ok;
            }
        });
    });

Can anyone please help me figure this one out? Thanks!

Answer 1

It isn't entirely clear what your validation requirements are but if you are trying to target required attribute you can use an attribute selector'

For example on a single checkbox:

<input type="checkbox" required/>

var ok = $(':checkbox[required]').is(':checked');

Would need to see more html and have better explanation of your needs to improve this

See API Docs for has-attribute selector

Answer 2

You can try to check if the selector input[id*="required"]:not(:checked) returns with length "0", that will be true either if all required are checked, and also if there's no required on the page:

$('#item_form').submit(function() {
    var ok = $('input[id*=\"required\"]:not(:checked)').length == 0;
    $('#error').toggle(!ok);
    $('html, body').animate({scrollTop: 0,scrollLeft: 300}, 500);
    return ok;
});

Answer 3

Simple solution...

$('#item_form').submit(function () {
   if ($(this).find('input.required').length > 0) {
       alert('oops, a field is required'); // this is where you'd put your loop to make sure each required field is filled
   } else {
       alert('form is good to go');
   }
});

Note though that you can only have one instance of an ID on a page, so use class="required" instead of id="required".