2

What's the best way to update the form class in RSForm!Pro if the error message is shown?

Could this be done using jQuery or a PHP script?

The code when the error is shown is:

<form action="http://webaddresshere.com" enctype="multipart/form-data" class="formResponsive" id="userForm" method="post"><p class="error">Please complete all required fields!</p>
<h2>Inapub in your inbox</h2>
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<fieldset id="rsform_5_page_0" class="formHorizontal formContainer">
    <div class="rsform-block rsform-block-intro">
        <p>Subscribe to our newsletter today to recieve the latest blogs and stories from the team and exclusive product offers</p>
    </div>
    <div class="rsform-block rsform-block-full-name">
        <div class="formBody"><input type="text" class="rsform-input-box" onfocus="this.value=''" id="Full name" name="form[Full name]" size="20" value="Full name"><span class="formValidation"><span class="formNoError" id="component47">Please enter your full name</span></span></div>
    </div>
    <div class="rsform-block rsform-block-email-address">
        <div class="formBody"><input type="text" class="rsform-input-box rsform-error" onfocus="this.value=''" id="email address" name="form[email address]" size="20" value="email address"></div>
    </div>
    <div class="rsform-block rsform-block-pubsupplier">
        <div class="formBody"><input type="checkbox" id="PubSupplier0" value="I work in a pub" name="form[PubSupplier][]"><label for="PubSupplier0">I work in a pub</label><input type="checkbox" id="PubSupplier1" value="I am a supplier" name="form[PubSupplier][]"><label for="PubSupplier1">I am a supplier</label></div>
    </div>
    <div class="rsform-block rsform-block-over-18">
        <div class="formBody"><input type="checkbox" id="Over 180" value="I confirm I'm over 18" name="form[Over 18][]"><label for="Over 180">I confirm I'm over 18</label></div>
    </div>
    <span class="formValidation"><span class="formError" id="component48">Please enter a valid email address</span></span>
<span class="formValidation"><span class="formError" id="component49">Please state you profession</span></span>
<span class="formValidation"><span class="formError" id="component50">Please confirm you are over 18.</span></span>
    <div class="rsform-block rsform-block-subscribe">
        <div class="formBody"><input type="submit" class="rsform-submit-button" id="Subscribe" name="form[Subscribe]" value="Subscribe"><span class="formValidation"></span></div>
    </div>
</fieldset>
<input type="hidden" value="5" name="form[formId]"></form>

When the error Please complete all required fields!

is shown I want the form class to be updated (or at least a class appended to it).

1

Not sure how RSForm!Pro shows an errors message, but I assume there is a pre-defined HTML element with a class that is set to display: block if there is an error.

So what I would suggest doing is, make the error appear, then inspect the error element and check for any classes, then you can use the following jQuery:

jQuery(document).ready(function($){

    var errorMsg = $('.formError');

    if( errorMsg.is(':visible') ){          
        errorMsg.parents('.formResponsive').addClass('something');          
    } 

});
  • Thank you, that will add a class to the error message though won't it and not the form ? – RustyJoomla Nov 28 '14 at 10:07
  • @RustyJoomla - Sorry, I've updated the code for you ;) – Lodder Nov 28 '14 at 10:22
  • Thanks but doesn't appear to be working, I've updated the code above (when the error is shown) – RustyJoomla Nov 28 '14 at 10:48
  • Any errors in the browser console? – Lodder Nov 28 '14 at 10:59
  • ReferenceError: error is not defined if( error.is(':visible') ){ – RustyJoomla Nov 28 '14 at 10:59

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.