Dynamically change parsley rules for a field - javascript

I have a task which I can simple describe: I have a dropdown with, say, 3 positions. And one field.
If option0 is selected, then no validation for a field required.
If option1 is selected, then field should be numeric.
If option2 is selected, then field should match some regex.
How can I achieve this behaviour with Parsley?
The only way I found for now is remove a whole parsley, change HTML and then reinit it:
$(myDropDown).change(function() {
$('form').parsley().destroy();
var input = $(this).parent().find(".my-cool-input");
//changing input attributes based on selected value
//reinitialize parsley
$('form').parsley();
});
But here I change global state of whole parsley while I want to change one field validation only.
Another option is writing a custom validator, but I want to reuse standard email and others validation rules and messages, if possible.

Just change the field attributes and trigger('input') on it.

Related

How to extend a Django forms ChoiceField to also accept text and search for close matches to avoid having to find something in a long list

I'd like to improve the usability of a form that I have that allows the user to select an area which can be highlighted on a map.
I want to retain the drop-down list for the user to browse but also for them to be able to type in the field as free-text and have a part-match on their input and filter the list to items that resemble their input.
Some of the entry's are quite long and a few words, eg. ideally "Middlesbrough South and East Cleveland" would appear in the list as the user inputs "Cleve" along with any other close matches.
The page looks like this at the moment
I have a simple Django form:-
class ConstituencyForm(forms.Form):
description = "Use the dropdown to select an area:-"
lstRandom = [(0, 'Random')]
lstChoices = lstRandom + list(constituency.objects.values_list('id', 'name'))
ConstituencySelection = forms.ChoiceField(choices=lstChoices, widget=forms.Select(),required=False, label="")
The form is instantiated and passed in this extract from the view:-
frmCons=ConstituencyForm()
if not request.GET.get("ConstituencySelection") or int(request.GET.get("ConstituencySelection"))==0:
intConsId = random_cons_view()
strConsType = "random"
else:
intConsId = int(request.GET.get("ConstituencySelection"))
strConsType = "selected"
objCons=get_constituency_view(intConsId)
context={
"consform" : frmCons,
"consgeom" : json.loads(objCons[1]),
It appears here in the template:-
<form method='get' action=''>
Select an area:-<br>
{{ context.consform }}<br><br>
Select a maptile:-<br>
{{ context.tileform }}<br><br>
<input type="submit" value="Update" >
</form>
I'm researching as best as I can, but struggling to piece together how to make this change.
Something like:-
-Change the Form field type to a type that accepts choices and free-text (like a combo field in MS
Access)
-Use a filter with "title__contains" in the view? Can I still keep all the choices in the form object?
-Use JavaScript to recognise a key-up event in the field and refresh the list? I'm not at all skilled in JS but would like to give it a go.
What are the steps I need to take and how would it be coded?
Please could you help me to achieve this? Many thanks to a great community,
Phil
I have managed to get something working in the end having taken a course in JS.
Ultimately, html alone won't get close to combining a select input with a text input in a single control.
A combination of a text input right above a select input with appropriate java script events to synchronise the select with what the user types in the text input is close enough in my opinion.
The event listener responds as follows:-
On text input keyup (the user is typing looking for a part match) - go through the select options array and set hidden to true or false as the input string develops to increasingly filter the list using a non case-sensitive includes method on each option label. The size property of the select input is also dynamic showing between 1 to a maximum of 5 options based on the options remaining.
On select input change or click (the user selects an option), a separate read-only text input is set with the value of the selected option and the user can click on a corresponding button to find the data for that option.
On clicking a clear button: the options in the array have their hidden property reset to false.
There are a few other bits I added to improve functionality - eg use a regular expression to break a input with punctuation into multiple part matches and look for both but this is contextual for the use-case.
The code is quite lengthy and bitty so I've attempted to explain this solution contextually assuming appropriate JS knowledge. I'd be happy to provide more detail if anyone has a specific use case they'd like support with.

jquery enable/disable fields based on variable

I have a variable that i am using to disable input fields across all field sets in a page.
$("[eventDisabled='true'] input").attr('disabled', 'disabled');
However i need to enable certain input fields that are in some specific div, i have placed those input fields in some other div
When i use below code to enabled them, it is not working
$("[eventDisabled='true'] #someotherdiv input").attr('enabled', 'enabled');
Any help
One way to suppress inputs within a specific container by using the css psudo-class :not(selector) in your jQuery selector as follows:
$('div:not(#someotherdiv) input[eventDisabled=true]')
This will select all inputs that has an attribute of eventDisabled with a value of true and that is not a child of a div with an id of someotherdiv

Don't validate hidden field

I have some fields that are shown only depending on some conditions, it work's fine to show and hide field with Jquery
but these fields are validated on submit even if they are hidden, I have required in the model
how I can't validate the hidden fields ?? I found : http://fluentvalidation.codeplex.com/
or I can apply the following MVC hidden field being validated
Thanks
you can change the input name attribute when you are hiding/showing it.
That way the it would be ignored.
When you are doing your validation, add a condition:
if($("#myHiddenElement").css("display")!="none")

javascript/jquery input validation

I have form where a user can add more input boxes on button click.
User can have as much input boxes as they want.
I do not plan to add a button for removing fields.
They default number of input boxes is 2.
Say the user decides to add 3 more, now there are a total of 5.
For validation, I would like to check if the input box is empty or if the input has all spaces like: " " no matter how many spaces as long as it has nothing else but space.
I can do the check for an empty input by checking length, but how can I check for the latter?
Is there a regular expression for any number of consecutive spaces?
Thanks!
PS: I am using jQuery with jQuery mobile
You can check if an input field is blank by checking its .value.length, as you already know. To check if it only contains whitespace, then try this: (assuming that the input is stored in a variable called input)
if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!
Reference.
Your question has a few components:
how to add input fields dynamically?
how to loop through these fields and validate them as well?
how to check whether a field really contains content, not just empty values?
We need to address all of these issues in a systematic manner:
Starting with the easiest - detecting empty string:
if (value.replace(/\s/g,'')=='') //string is empty
Next, to add input fields dynamically:
var myinput=document.createElement('input');
document.body.appendChild(myinput);
//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);
To check all your input fields, you check the static ones first, then loop through the dynamic input fields:
valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++){
var input=document.myinputs[i];
if (input.value.replace(/\s/g,'')=='') valid=false;
}
alert(valid);

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?
Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.
You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.

Categories

Resources