Change button color once all required fields are filled | Community
Skip to main content
SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
Jul 20, 2020 10:53 PM UTC

Good point, Jo.


P.S. Covering all the bases with this particular behavior also means incorporating the Marketo validation rules using the Forms JS API, since "filled out" doesn't necessarily mean "valid" and the UX requirement surely means valid.

View reply

11 replies

Harish_Gupta6
Harish_Gupta6
Level 6
Jul 20, 2020 3:43 PM UTC

You need to write a JS script and add onblur events on all fields and then create a function to check if all fields have been filled or not. Call this function on each field onblur event and validate the field. If all fields have the data then change the color of your button. Let me know if you need help with Script. 

 

Thanks

Translate
Harish Gupta
    Jo_Pitts1
    Jo_Pitts1
    Community Manager
    Jul 20, 2020 10:32 PM UTC
    @harish_gupta6 wrote:

    You need to write a JS script and add onblur events on all fields and then create a function to check if all fields have been filled or not. Call this function on each field onblur event and validate the field. If all fields have the data then change the color of your button. Let me know if you need help with Script. I will write it for you.

     

    Thanks

    @harish_gupta6 - this is probably treading over the line as far as community guidelines go.  You aren't allowed to solicit work IIRC.  You are allowed to demonstrate expertise by offering up ideas that may make people come to you for work.

     

     

    Translate
      SanfordWhiteman
      SanfordWhitemanAccepted solution
      Level 10
      Jul 20, 2020 10:53 PM UTC

      Good point, Jo.


      P.S. Covering all the bases with this particular behavior also means incorporating the Marketo validation rules using the Forms JS API, since "filled out" doesn't necessarily mean "valid" and the UX requirement surely means valid.

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...