2

I'm using RSForms! Pro and I have a form which has 4 fields which need to be completed. Is there any way to set the Submit button to not be active until all of the fields have been completed?

I have tried the following but it's not working correctly:

function validate(){
    if ($('#FullName').val().length   >   0   &&
        $('#Email').val().length  >   0   &&
        $('#VenueName').val().length  >   0   &&
        $('#VenuePostcode').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
  • Are you looking for RS Forms Pro configuration solution or to write your own server side validation code to implement? – Brian Bolli Sep 29 '14 at 14:35
  • Thanks for your comment, ideally looking for any solution. I've tried the above function using JavaScript but it doesn't appear to work – RustyJoomla Sep 29 '14 at 14:50
  • Honestly, this is something I would try to do using RS Forms back-end interface. I'm fairly confident they have a solid client-side verification feature set and there's no need to re-invent the wheel if you're already using the component. – Brian Bolli Sep 29 '14 at 15:28
  • Turn on AJAX Validation and set all fields required. This will block submitting an empty form... – COBIZ webdevelopment Mar 17 '20 at 22:19
2

I suggest you start with disabling the submit button using jQuery(to avoid disabled buttons for non-javascript users):

jQuery("#Submit").prop('disabled', true);

Then use this code to enable the submit button if all fields are filled out:

var toValidate = jQuery('#FullName, #Email, #VenueName, #VenuePostcode'),
    valid = false;
toValidate.keyup(function () {
    if (jQuery(this).val().length > 0) {
        jQuery(this).data('valid', true);
    } else {
        jQuery(this).data('valid', false);
    }
    toValidate.each(function () {
        if (jQuery(this).data('valid') == true) {
            valid = true;
        } else {
            valid = false;
        }
    });
    if (valid === true) {
        jQuery("#Submit").prop('disabled', false);
    } else {
        jQuery("#Submit").prop('disabled', true);
    }
});

Modified code from this post on StackOverflow.

Quick demo: http://jsfiddle.net/ddxqu7yy/

  • +1, however I would remove onfocus="this.value=''" from the inputs as if you type in a value, then go back to it, it gets reset. I would also suggest making jQuery(this) and jQuery("#Submit") variables as you're using them more than once ;) – Lodder Sep 29 '14 at 17:37
  • Yes, I'm sure the code can be improved. I couldn't get the variables to work right now, maybe tomorrow... Regarding the onFocus code, that was from the OPs website (I think), but a better solution would probably be to use placeholder="Full name". Example: <input type="text" size="20" id="FullName" placeholder="Full Name" /> – johanpw Sep 30 '14 at 2:22
  • Use .change() instead of .keyup() because some people use auto-form-filler plugins or copy/paste with right click. – Farahmand Sep 30 '14 at 8:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.