How to move the asterisks of required validation inside the fields?

  • Profile Image
    optizign13
    Asked on February 06, 2014 at 12:44 PM

    Hello. Whenever I make forms, I use the Hint Example option for text so the text is inside the input area (which is cleaner and nicer looking). Is there n option to make the input/textarea required? I know that there is a "Required" button option but that is placed outside of the input boxes and I don't want that. This will help a lot with spam and such. Please let me know. Thanks! 

  • Profile Image
    BDAVID
    Answered on February 06, 2014 at 02:24 PM

    Hi, If you do not want ot have the Required message outside of the Text Area like this, I think is not possible.

    However, you can remove the Highlight Effect:

    Also change the color of the required message by injecting CSS code

    This is the code:

    .form-line-error input:not(#coupon-input),

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #F8F8F8

    ;

    -moz-box-shadow: 0 0 2px red;

    -webkit-box-shadow: 0 0 2px #eee;

    box-shadow: 0 0 2px #F8F8F8

    ;

    }to.form-line-error input,

    .form-line-error textarea,

    .form-validation-error {

    border: 1px solid #F8F8F8

    ;

    -moz-box-shadow: 0 0 2px #F8F8F8

    ;

    -webkit-box-shadow: 0 0 2px #eee;

    box-shadow: 0 0 2px #F8F8F8

    ;

    }.form-line-error {

    background: none;

    }.form-line-error .form-error-message {

    background: none;

    color: black;

    }

    Since what you trying to avoid is things such as spam, you can also add a captch field:

    Hopet this helps you, if you have another questions please open a new thread.

  • Profile Image
    optizign13
    Answered on February 06, 2014 at 02:44 PM

    Hello. Sorry, I think you misunderstood me. I understand the captcha option is used for security, and I will use that as a 2nd option. However, I am trying to acheive something else. 

    Once I click the red "required option" button, the red * is outside of the input area.

    My quesiton is: If there is a way to have/move the red * INSIDE the input area (as oppose to outside)? If I simply add "*" under "Hint Example," the required option will not be applied. 

    Bascailly, it doesn't make sense to have only the red * outside the input box when the rest of the text is inside (using Hint Example).

    I hope that helps clarify what I am trying to achieve. Thanks. 

  • Profile Image
    EliezerN
    Answered on February 06, 2014 at 04:05 PM

    Thanks for the explanation.

    We can move the red asterisks inside the fields, however, they will not dissappear at the time of typing into the fields. I moved the asterisks as you wish in a cloned form and here it is: http://form.jotformpro.com/form/40365781186965

    What you can do is to set the fields as required, remove the red asterisks using CSS code and then put the asterisks as hint text so that people can know the fields are required.

    Here is an example form: http://form.jotformpro.com/form/40366750948968

    You can clone my form if you think is useful for you. Here is how to clone it: How to clone an existing form from a URL

    I used this CSS code to hide the asterisks:

    .form-required

    {

    display:none !important;

    }

    I hope this helps. Inform us if you need further assistance with this inquiry.

    Thanks

  • Profile Image
    optizign13
    Answered on February 25, 2014 at 07:41 PM

    Hello. Thank you for the code! It works well. 

  • Profile Image
    ashwin_d
    Answered on February 25, 2014 at 09:40 PM

    Hello optizign13,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!