How do I find and correct what appears to be a Required field conflict with Pop-up balloon?

The problem seems simple, but the solution for has been impossible for us.

We have been working for a week to find the problem that developed after moving our standard Pop-up Alert Balloons from our old form to the new JotForm form.  The Jotform is terrific but we need the Alerts to show how they need to enter two of 10 field which have three parts to the field.  We have never had any problem adapting our Pop-ups to other forms, and didn't anticipate any problems with JotForm.

Here's the Problem:

     Location: JotForm, bottom field of 10 (8 are required)

     Action (or lack thereof) The last field (as required) needs to be filled in along with the other 7 required fields                before theSubmit Button is clicked in order for the data to be submitted.              
         BUT IF ALL REQUIRED FIELDS ARE ENTERED EXCEPT THE LAST FIELD, THE FORM CAN ACCIDENTLY BE                      SUBMITTED BY AN ACCIDENTAL CLICK OF THE ENTER KEY OR A CLICK OF THE SUBMIT BUTTON.

In the SCREEN SHOT, You can easily see that the Required Red * is there, for the last field, but the Red "This field is required" is not.

For the screen shot I set it to display all Required fields by clicking the submit button right at the beginning, so the Required icons would show which were working and which were not.  The only one not working is the last field.

The URL lets you try the required fields yourself, and  "view page source".

 I hope someone can set us straight

Thank you for every eyeball, and idea.

Haler

Hi Shadae, 

I was  really thrilled when I got your solution, so I sent it off to my guy who has been working on the project.  He came back and said the Pop-up Alerts were disabled.  So I tried substituting the code myself and got the "Required field notice" function for the #10 field but the pop-ups were a disaster.

You can see how they are supposed to work when you open the URL: The alerts, each appears when one clicks on one of the two colored ALPHA-NUMBR FIELDS; and is positioned with the tip of its pointer at the top edge of the appropriately colored ALPHA-NUMBR FIELD, and then one is instructed what 5 alpha, a dash, and 5 numbers must be entered.  It worked before, but after inserting the new code that you so carefully laid out for us, the alerts and the fields they support are dysfunctional.

Do you have any ideas of what we might be doing wrong or need to do in addition?

Thanks for your help,

Haler

 

Haler

We will do some test and get back to you with a possible workaround for this.

Hi Jeanette, and the whole team,

 

Your effort is very much appreciated, and I am looking forward to your success, and to learning about what and how it is accomplished.

Let me tell you why it is so important:  I will need to put together a variety of similar forms that will be workable with a variety of mass emailing operations.  So it will be important to know how best to make those accommodations with a high degree of reliability.

Thanks again,

Haler

Well, I am getting a little disappointed, things don't even seen to be moving in a positive direction.  

Here is the URL for the file that performs just fine except that the 10th field, the one right before the Submit button, does not have a working Field Required functionality:

 http://www.snowcloudrider.com/1D/2-Ka13ar-RedAlphaNeedsRqrdFnctn_copy(2).htm

The following URL is for the file to which I added the change update that I got around midnight last night: (These two files are identical except for those changes) I hope you find that I made a mistake, get a clue as to what is really needed.

http://www.snowcloudrider.com/1D/2-Ka13ar-RedAlphaNeedsRqrdFnctn_copy(1).htm

I made up three sets of comparative screen shots, at different stages, but I see here, there is no opportunity to submit them.  The only clue I can see is the close proximity of the field to the Submit Button

But thanks for your efforts,

Haler

Hello Haler,

I compared the code for the form on your website to the one that you have in your Jotform account and I was able to see minor similarities with the code. Base on my analysis, it seem as if you made changes to the id for each of those fields (ALPHA-NUMBR fields).

I have taken the initiative to copy the code from source code on your website as well as that from the Jotform account for the 10th text box in question for comparison.

Original Code:
<input class="form-textbox validate[required] form-validation-error" data-type="input-textbox" id="input_14" name="q14_Create14" size="11" value="" type="text">

Modified Code From Website:
<input type="text" class="form-textbox validate[required]" data-type="input-textbox" id="fields_youro-crb" name="q14_Create14" size="11" value="ALPHA-NUMBR" style="font-family: Arial Black; font-size: 13PT; text-transform: uppercase; color: #FF0000; font-weight: bold" accept="RBN" maxlength="11">

My Version - You should try
<input class="form-textbox validate[required] form-validation-error" id="input_14" name="q14_Create14" size="11" value="ALPHA-NUMBR" style="font-family: Arial Black; font-size: 13PT; text-transform: uppercase; color: #FF0000; font-weight: bold" accept="RBN" maxlength="11">

It is possible that the jscript/php files are targeting the ID "input_14" but you changed the name to fields_youro-crb and did not update it in those files. Reverting to the original IDs and CSS attributes might do the trick. Do give the suggested code above a try and let us know how it goes. We will await your response.


Cheers!
Sean

Hi Sean,

Thanks for the suggestions

Objective is to:
     1. refunctionalize the "this field is Required" for the last field in the form
     2. without disabling the field's unique functionality

Your first suggestion seemed to have no affect on either.

The second (Reverting to the original Code) disabled the last field, that is it wiped out the field's initial value and would not accept any value

 

Thanks for the effort,

Haler

 

 

Let me tell you my experience

Hello Haler,

Thank you for your patience. I am currently looking into another procedure we can try. I will update you as soon as I am able to provide this resolution. I will be in touch.


Cheers!
Sean

Hello Haler,

As mentioned in the above thread entries, your form will submit even though there was noting entered into your CID text box (10th text box). It appears that you have a value set for that field which is "ALPHA-NUMBR" and for that reason the read only functionality is not triggered when a submission is attempted. I would recommend using the Placeholder attribute instead of setting a default value to that field.



Please test this code to see if the issue will persist:

<input type="text" class="form-textbox validate[required]" data-type="input-textbox" id="fields_youro-crb" name="q14_Create14" size="11" placeholder="ALPHA-NUMBR" style="font-family: Arial Black; font-size: 13PT; text-transform: uppercase; color: #FF0000; font-weight: bold" accept="RBN" maxlength="11">

Do let us know how it goes. Looking forward to your response.


Cheers!
Sean

Hi Sean,

I very much appreciate your efforts, but while you instructions look very detailed -- and should be easy enough for anyone to follow - I am stumped - here's why...

1. "default value set for the field" which may be a matter of usage.  Clarification: the "ALPHA-NUMBR" is not a default value (as an automatically assigned value), but rather an Initial value (as initially set to display until action is taken, and then to disappear) such as a common initial value: MM-DD-YY.  And in fact that is exactly how it works, but there is something that is going on to replace the "ALPHA-NUMBR"  as soon as the Submit button is clicked on, so as a result that replacement the Required criteria is met, and the form is submitted.

2. I am not clear as to what you are recommending when you refer to a "Placeholder attribute" instead of setting a default value to that field."

3. I think I can tell what you intend me to insert into the code, but I can not tell where it should be placed.

4. And as you can see in item #1 I am not sure we understand the problem correctly.

I need some clarification.

 

Thanks,

Haler

Hi Haler,

Thank you for your additional details.

I have checked the custom script you have placed on your form source code and I think the following is the nature of the problem. Actually I don't think it's a problem at all, it's most probably a wrong approach on when to populate a value on the last required field.

1. Your last required field has a default value (see image below) which I understand is part of your custom source code condition. However, this makes the field "filled" by default. This is the main reason why the required validation isn't triggered.

2. From my analysis, that field is continuously filled with a default value "ALPHA-NUMBR" once it loses focus. In other words, the field is filled and there's no means for the required warning to appear. 

To make some sense, here's a short GIF image that illustrates how the two different required fields (your custom required field and a regular required field) are working on focus and unfocus.

One way to resolve this is to remove the .value line of code on blur event and add this condition || this.value == '' on focus event. Here's my modified version.

https://shots.jotform.com/elton/Test_thread_505770.html

Or you can try a different approach like using placeholder instead of value. I think there are several ways to do that.

e.g.

instead of

this.value = 'ALPHA-NUMBR';

use

this.attr("placeholder", "ALPHA-NUMBR");

Thanks!

Hi  EltonCris,

I was very impressed with all you showed and I tried most of what you showed.  The approach that worked best for me was your way to resolve the issue by removing the .value line of code on blur event. 
To be honest, I don't know what it was you did, but when I checked out:

https://shots.jotform.com/elton/Test_thread_505770.html   

I am very grateful for your almost perfect solution.

 

Everything worked great but one thing - the requirement that the Alerts stay visible to the end of their process.
In fact with a sloppy click or key stroke the Alert can disappear and clicking all around can be a frantic or aggravating experience, when the alert is essential for then to know how to make their own code. The Alerts have always been set to come up on the following schedule, and stay up until the next Alert takes charge:
Alert #1 pops-up and first click or key stroke on the Data Entry Box and stays up till the 5th ALPHA is entered.  At that point the:
Alert #2 Replaces Alert #1 and stays up until the Dash is clicked on, which triggers the 
Alert #3 Which instructs what numeric values are to be used  for characters 6-11.  When 11 is reached:
Alert #4 Appears and stays up until the all fields are full and the Submit button is clicked on.

This is important, because without those Alert  instructions there is no apparent way for the individual to complete the form and submit it.

 

I will get a video clip so you can see what can be experienced and attach  a link to it.  I hope you will have time to take a look as see what you suggest to get that needed function back.

 

@Haler

I can see that when the required warning appears it removes your custom alert box. That is probably due to the CSS property on the required class (.form-line-error) which is set to overflow:hidden preventing your custom alert box from displaying. Changing this to overflow:visible should keep your custom alert box on the screen.

To do that, add the following CSS codes to your form. Just place this code anywhere between the header tag <head> </head>

<style type="text/css">

.form-line-error{overflow:visible !important;}

</style>

You can check back my demo. I have this applied and I think it is working exactly as you want.

Let us know if I have missed something. Thank you!

To The Brilliant Elton Cris,

I am so fortunate to have been privileged to have had your help in getting this form back to the
standard needed.

Clearly, you are destined to achieve far greater things, as you use your skills, perceptiveness, and creativity in the wonderful and prosperous future that lies ahead for you.

Elton, thanks again,

Haler

PS: But I must thank everyone at JotForm, who helped.  Thanks for you wonderful effort.

Hello Haler,

On behalf of the entire team, thank you for your kind words and you are more than welcome for the assistance provided. Do let us know if you ever need further assistance regarding this or any other issues in the future.


Cheers!
Sean

Hi Elton Cris, and the rest of you guys,

 

I hope this finds you in good health, good form, and filled with creative ideas to turn into realities.

Thanks  again for the help you gave me, but something has happened regarding this form's function that I don't understand.  

          http://www.snowcloudrider.com/shots-jotform-com-elton-Test_thread_505770.html

It has lost the Required field functionality for the last ALPHA-NUMBR field , that I thought you had solved.  I figured somehow I had screwed things up.

 

So I went back to the: JotForm Support Forum to get the solutions:

Answered by EltonCris on February 02, 2015 at 11:39 PM:

https://shots.jotform.com/elton/Test_thread_505770.html    & the supliment:

 

Answered by EltonCris on February 05, 2015 at 03:48 AM:

add the following CSS codes to your form. Just place this code anywhere between the header tag <head> </head>

<style type="text/css">

.form-line-error{overflow:visible !important;}

</style>

 

 But it did not seem to work.  Here are the steps I took but it did not cause the final field to display or act as a Required Field.  Instead it would take a click on the Submit button as though all Required fields had been filled as required:

Step 1:  Copied the:   https://shots.jotform.com/elton/Test_thread_505770.html

Step 2:     Opened it in Chrome and copied the code

Step 3:     pasted it into my editor

Step 4:     Copied the :   <style type="text/css">

.form-line-error{overflow:visible !important;}

</style>  

Step 5:     Searched for:  <head> and found it in line 333

Step 6:     Inserted :

L   334     <style type="text/css">

L   335    .form-line-error{overflow:visible !important;}

L   336    </style>

Step 7   Saved the whole file with the changes:

 

 

Step 8:  But when I put the form on the web the  “*” is showing but the

“This  field is required pointer message does not display:

 

Step 9:  And the Submit button is functional and submits without the ALPHA-NUMBR field being fulfilled

Here's the forms location:  

        http://www.snowcloudrider.com/shots-jotform-com-elton-Test_thread_505770.html

Can you see anything I am doing wrong, or should be doing to get this form to work reliably regarding the ALPHA-NUMBR field, with the rest which seem to be just fine?

 

Thanks,

 

 

Haler

Hello Haler,

I did check your form and found that the required validation for form field "Create Your Own CIB code to Win" is not triggered only when it has default value "APHPA-NUMBR".

The reason why it does not trigger the validation is because the text "APHPA-NUMBR" is considered as text box value. If you click on the field then the validation works fine. Please check the screenshot below:

 

I copied the source code of your form and added the hint text to display the "ALPHA NUMBR". Please take a look at the following form and see if this works as expected:  https://shots.jotform.com/ashwin/test_thread.html 

The validation in the above form should trigger as expected. Please check the screenshot below:

If it works as expected, you can follow the same steps to copy the source code and paste it in your editor.

Hope this helps.

Do get back to us if you have any questions.

Thank you!

 

Hello ashwin

 

Thanks for the work, your video clip looked great, but when I tested the URL you displayed, in Chrome, I could not replicate the performance you were showing.

 

Hint Text = To temporarily display a hint as to what is expected to be filled in., and disappears at the first click into the text box. The hit works in the ALPHA-NUMBR. But DOES NOT NOW work for me in Chrome, Firefox, & Opera, but does work in IE

 

My Test Procedures: For your: https://shots.jotform.com/ashwin/test_thread.html (See item #5a Below)

 

Click the submit button to see that all Red Required field notices are functioning 

Refresh & enter into all fields BUT NOT last two: First Name & ALPHA-NUMBR and

click the Submit button to see if the two Red Required notices appear.

3. Enter the First name and click “Enter to see that the ALPHA-NUMBR Required stays up,
and the Submit is not activated. 
4. Click on the Submit button to see that the Red Required function is still working for ALPHA...
5. Click on the ALPHA-NUMBR entry box to check the functionality of the Pop-Up Alert and its
Features are operational with its field character structure of 5 Alpha, “-” and 5 Numbers

a. That the ALPHA-NUMBR Hint must disappear on first click.  Does not for me
when using your https://shots.jotform.com/ashwin/test_thread.html . (See ALPHA-NUMBR
above on the form . Or : the functionality of ALPHA-NUMBR
http://www.snowcloudrider.com/1D/2-Ka13ar-RedAlphaNeedsRqrdFnctn_copy(2).htm of Jan31 Answer

b. That the #1 pop-up Alert appears immediately. 

c. That only Alpha are registered in first five character spaces 

d. That the #2 pop-up Alert appears as soon as the 5th Alpha character is entered.. 
e. That the #3 pop-up Alert appears as soon as the “-” is entered. 

f. That the #4 pop-up Alert appears as soon as the 5th Number is entered, and stays up till Submit

6. Refresh &: observe that the first field's option: “(Other )” now somehow displays as OTHER

          My intention is to modify the “(other)” as follows:

                                  O Other
                                  ( Enter Title)

Ashwin,  Thanks so much for you help.

 

These links:

https://shots.jotform.com/ashwin/test_thread.html

http://www.snowcloudrider.com/1D/2-Ka13ar-RedAlphaNeedsRqrdFnctn_copy(2).htm

I've viewed it here and I can't replicate 5.a from the given actions. I'm using Google Chrome, here are the screenshots:

For Ashwin's link:

 

For your own link:

The tooltip disappears on a single click. 

 

As for the "Other" box in the radio button field. I think it's something because of the script in the source codes. Will check and get back to you.

Thanks