jquery HTML5 form validation

For all fields you want to use client-side validation, the “required” attribute must be present.

I did change how the HTML5 plugin works so that the “required” attribute is not placed automatically. That was a bad decision on my part and it was causing problems I could not solve any other way. I’m sorry for any inconvenience that caused.

The client-side validation is no longer working even for the fields that I have set the required attribute.

The entire script that I set up
$(document).ready(function() {
$( “form” ).validate({
rules: {
.
.
.
messages: {
.
.
.
}
});
});

is just being ignored.
All of these rules and messages were operational previously.
I have tried rolling back participants database. I dont think I can roll back the HTLM5 plugin?

I have tried creating a separate form on the website, with validation to check that the jquery is being loaded correctly and the client-side validation works correctly on that form.

For the participants database form validation, I have always had
$( “form” ).validate({
I cannot see that the form has an id to use.I am using the multi form. Has this been changed?

This is a desperate situation. Please can you think of anything else, or provide me with the old HTML5 plugin to try?
Thanks

The HTML5 plugin does not use jQuery validation, nor does Participants Database, so I don’t know specifically how an update would have affected your code. The plugin does not normally add an “id” to form tags.

Are you using validation code you got from my website?

On The https://xnau.com/product/html5-form-elements/ description page it says:

If you’ve got some Javascript skills, this plugin works seamlessly with popular jQuery validation plugins to give your users a complete client-side validation experience. Using jQuery-based client-side forms validation makes your forms easier and faster to fill out and is the only way to achieve conditional validation where some fields are only validated given the state of other fields.

Is is exactly what we needed as some fields are conditionally required based on the state of another field.

So I added the jQuery plugin script and wrote all the rules and messages for the fields. This used to be working perfectly.

Now, for some reason, I am getting no client-side validation. The fields that are marked as required, are only flagged as required when the form is submitted.

I have tried removing all the JQuery script and rules and messages to leave participant database with no conditional rules. But still, the ‘required fields’, are not being validated client side.

I simply cant think what to do. I am in the process of rolling back the participants database plugin and getting the HTML5 plugin back from backup.
I assume that the client side validation works fine for you on a multi-form, so I’m truly lost here.

I cant understand why it was working, but sadly, I don’t know exactly when it stopped.

Well, I can only supply limited support for custom code.

Looking at the code you provide, I don’t see how it would break with a plugin update, so the first thing I suggest you check is that the jquery validation script is getting loaded. Our plugins don’t do this, so you must have added custom php code that loads this script. The script is usually named jquery.validate.js or jquery.validate.min.js. You can check in your browser using the browser developer tool to see if this script is getting loaded.

Another thing to check: make sure your init code (the code you included in your comment above) is getting loaded. I don’t know how you are including this, but something may have changed so that your init code isn’t loading either.

I have checked that the jquery validation script is getting loaded and working. I did this by adding another form to the site with rules. The client-side validation works on this form correctly, showing that the script is being added and works.

The odd thing is that the client-side validation is not working on the participants database forms as expected with just the HTML5 plugin and all the custom code removed, with the flags set as ‘required’ in the ‘Manage Database Fields’. I believe that if you have the HTML5 plugin, the form should automatically use client-side validation?

I can see from the web developer tools that the init code is being added.

We’re talking about two different kinds of client-side validation here. If you add the “required” attribute to the field, the browser will validate that field without using jquery validation at all. This is the only kind of client-side validation that the HTML5 plugin uses. It’s not automatic, you have to add the “required” attribute to the field to get that.

The jquery validation you are using with your custom code is something you set up, the plugin doesn’t use jquery validation. If changes to the plugin broke that, you would need to find the specific reason for the failure to address it. If the jquery.validate script is getting loaded and the init code is getting loaded, then there are two main things to check to diagnose the problem.

First, the code has to be loaded in the right sequence, the main library has to be loaded first, also the form that is getting validated has to load immediately so when the init script runs, the form is present. You can see if there is a problem with this by checking the browser dev tools console after the page is loaded.

Second, the selector must target the correct form. The selector you’re using is very general, it will probably work, but you should check to make sure the form is getting the validation handler placed on it. For example, if you’ve got two forms on the page, it may be placing the handler on only one of them.

But, if I remove any custom code and remove the jquery validate plugin, then set the ‘required’ field in the ‘Manage Database Fields’ on an element, the form still does not validate until submitted. So, the required field is not flagged as required, until the form is submitted. Then, the error is displayed at the side of the form, not in the field that has the error.

This is the same behavior whether the HTML5 plugin is activated or deactivated.

So, I am saying that the HTML5 plugin is no longer having any effect.

I notice on inspection, that the opening form tag is
<form method=”post” enctype=”multipart/form-data” autocomplete=”off” action=”/new-client/applicant-one-new/?pid=XXXX” novalidate=”novalidate”>

I am not sure the novalidate=”novalidate” is correct.

So, I think I need to get the basic form validation working before I re-add the jquery validation on top.
Do you have any ideas why I could be having this problem now.

If you’re going to use that custom code to validate your from, you don’t need the plugin’s validation at all. So no need to get that working first.

The reason you’re not getting the client-side validation with the plugin is that you need to add “required” to the field attributes. This is not the “Validation” setting, it is the “Attributes” setting where you need to set it.

Also: the “novalidate” will interfere with the validation of the form, so that should be removed.

I am sorry, I don’t think I can be explaining very well. I have set the field attributes to required as you describe.

I dont know where the “novalidate” is set, I assumed it must be in the participants database:

<form method=”post” enctype=”multipart/form-data” autocomplete=”off” action=”/new-client/applicant-one-new/?pid=XXXX” novalidate=”novalidate”>

where ever it sets all these attributes for the multi form?

So, when I enter data on the multi form of participants database, with no custom validation and the HTML5 plugin activated, it is not validating the fields set with the required attribute until the form is submitted. The result is the same as when the HTML5 plugin is deactivated.

So, I think I am wondering if the “novalidate” has been added to the multiform in participants database at any point?

I have been working on this problem all day.

I see now, that the “novalidate” is added to the form by the jquery validate program. This is to stop browser default validating.

I have removed all the jquery scripts for validation, all the jquery rules and messages and just have participants database and the HTML5 plugin. I have made sure that the fields that are required, have the attribute set to required.

The form does not validate client-side.

If I add a message to the field in the message box on manage database fields, this shows up when the form is submitted.
The problem is that the field that has not been filled in is not highlighted, so it is hard to find.

I have tried a fresh installation of participants database on another site, with the HTML5 plugin. This form does validate client side.
However, if I add jquery script and validation, it does not work and no validation occurs. jquery validation does work on a test form that I put on another page.

I am afraid that our website is virtually unusable now, as the form depends on a lot of conditional validation. I am feeling very disheartened, as the site has used participants database successfully for 5 or 6 years and we have built a large database.
I don’t think I have enough knowledge to try anything else.

If you can provides a link to the page with the jquery validation code in place (in other words exactly how it was before it broke) I will take a look at it. You can email me at [email protected] if you want it private.