I'm sure this has come up many, many times before but I am at my wit's end with this problem. I'll try and be as descriptive as possible without bloating the problem statement.
I am using the jQuery validate plugin for form validation. All form rules and messages are retrieved via ajax and then initialised. All form validation works like a charm until I start cloning fieldsets inside the form to give the user the ability to add additional entries.
The input fields react exactly as they should to changing values (error highlights and displaying messages etc), but when I call the .valid() method on the form it ignores the additional fieldset cloned from the first.
I have added test rules after cloning the fieldset, and again, the input field responds correctly to the newly assigned rule but gets ignored when calling .valid() on the form element.
I will add code snippets should anyone be willing to help me find the problem.
Thanks in advance!
Fred
Edit:
I have found that the .valid() method only uses the first fieldset in the form. Take note that all input names of cloned fieldsets are the same as the original. For example, say i have a field called productName in my original fieldset and i clone it, I will now have two inputs in the form with the same name attribute.
Could it be that jQuery validate only cares about the first instance it reaches and validates on that? I have seen posts about jQuery validate not playing nice with duplicate input names on forms but i believe it was resolved.
Related
I have a login page that has 2 matInputs(username and password). I added the mat-error element to those to matInputs, so the mat-form-field displays an error message when entering invalid Username. Also, both inputs are part of a reactive form. So they both have the "formControlName" attribute.
The problem is that when I unfocus from one of the input fields(with out typing username or password), the warn color from Angular material triggers as part of the reactive forms validator(username/password should not be empty).
I provided images and I can provide code.
This is regular(Good):
This when entering password(Good):
This when Unfocues/Blur(Bad):
And this when entering invalid inputs(good):
I know that the reactive forms are triggering a validator when left empty(onUnfocus). I am trying to find a way to control that or control the Angular material warning color, so it does not trigger with the left empty validator.
There are different types of field validation and there is also form (submit/login) validation. At a practical level, you want form validation not field validation for not empty/required. By default, field validation (validators used in form controls or the 'required' attribute directive) is activated as soon as the field is 'touched'. So if you make a field 'required' an error will be shown as soon as the user applies and removes focus even without entering a value. Form validation however only takes place when the form is submitted.
You have two options - don't make those fields required and instead check them as part of your submit function and then set errors on the form controls if needed. You'll also need to take care of clearing those errors when the user enters a value or focuses the field.
Or, with reactive forms, you can implement a custom ErrorStateMatcher for those fields so that the 'required' validator will only throw an error if the form is submitted rather than when the field is touched. Turning off 'touched' validation this way is fairly common for this kind of thing - you can just modify the Angular Material example shown here: https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.
Have a chat room, issue is, is that when you submit something, the message in the form box stays. What I want, is for when it is submitted using the button, the message one clears.
So, I added $('#mbody').val(''); and added the id mbody to the form with the message in it. But for some reason, it clears the other form.
You don't need to change the non-existant value of the FORM (form inputs have values). You simply need to reset it.
var form = document.getElementById('mbody');
form.reset();
Make sure each form has a unique id.
I'll see your vague question lacking example code and raise you a vague answer. ID's need to be unique - you likely have duplicate ID's or are referencing the incorrect ID.
I just finished my first CRM callout, and it's working great, but it doesn't actually seem to take effect until the form that calls it is saved. It's a PreCreate deal that assigns a value to one of the attributes present on the form. Is there any way to get it to assign the new value and display it on the form as soon as you load it, or is this just the way it works?
You'd have to add some JavaScript to the onload event of the form and default any form fields that way. Callouts don't fire until after the save event happens, so they can't be used to default fields in the UI.
I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.
I have a few complex GUI elements (like a custom calendar with many days that can be highlighted) that appear along with standard django form input fields. I want to process the data I/O from these complex forms along with the Django forms.
Previously I would use AJAX requests to process these custom GUI elements on my HTML form after the Django form was saved or rendered, but this leads to a host of problem and customized AJAX coding. What is a good way to handle complex interactions widgets in a Django form?
Not sure if I understand completely, but you could have the value of your UI saved into a hidden element on the form via javascript. This can either be done as they select the values in the UI or when they submit the form. Pseudo-code assuming JQuery using submit() to save before the submit data is sent:
$('#myForm').submit(function(){
// get the value of your UI
var calendarValue = calendarWidget.getValue()
// #calendarData is the hidden field
$('#calendarData').val(calendarValue)
})
This obviously requires JS, but so does using your UI element.
Your question is very vague so I suggest you read the Django documentation on writing a custom field and hopefully that will help you get started. You might also want to investigate writing a custom widget. Unfortunately the documentation is bit lacking on that, but a Google search brings up several useful blog posts, including this one.
You have three options depending on how you output your Django Form subclass to the HTML page.
The first doesn't involve Form at all. Any html form inputs will end up in request.POST, so you can access them there. True, they won't be bound to your Form subclass, so you would have to manually inject the value either using a custom form constructor, or by setting some property on your Form object after instantiating it with request.POST. This is probably the least desirable option, but I mention it in case your use-case really doesn't support anything else.
The second is an option if you manually output the form fields in your HTML (ie: using {{ myform.field }} rather than just {{ myform }}. In this case, make a hidden variable to contain the value of your calendar GUI tool (chances are, your GUI tools already offer/require one). Add this hidden field, with the right name and ID, to the Form subclass itself, making sure it has a hidden django form widget. If necessary, use javascript as Rob suggests to populate the hidden field. When the form is posted, it will get bound to your form subclass as normal because, this time, you have a field on your Form subclass with that name. The machinery for clean() will work as normal.
The third, and best option, is to write a custom django field; Andrew's post has the link. Django fields have the ability to specify js and css requirements, so you can automatically encapsulate these dependencies for any page that uses your calendar widget.