We Keep Coding

Set Function as Compare in Form Validation using Declarative plugin

We are using FormValidation.io for form validations, now we are trying to use the identical validator using the html attributes which is applied via the Declarative plugin.
What we want?
We want the validation to check that confirm field is same as password field if not it should fail validation
<input
class="form-control"
data-fv-not-empty="true"
data-fv-not-empty___message="The password is required"
type="password"
placeholder="Password"
name="password"
id="input-password"
autocomplete="off"
>
<input
class="form-control"
data-fv-identical="true"
data-fv-identical___compare="getPassword()"
data-fv-identical___message="The password and its confirm are not the same"
type="password"
placeholder="Confirm Password"
name="confirm"
id="input-confirm"
autocomplete="off"
>
<script>
function getPassword() {
return $('#input-password').val();
}
</script>
Now the document states we can declare the compare value as both a string or a function that returns string. Now even if we call a function there it still converts the value as string so as per our current code will show the confirm to be invalid until the value of confirm is not equal to "getPassword()" not the output of this function but this exact string.
We would like to know how can we set compare using html attributes. We can achieve the same using the programatic way but we want to make it work using Declarative mode
Documentation links
https://formvalidation.io/guide/validators/identical/
https://formvalidation.io/guide/plugins/declarative/
https://formvalidation.io/updates/
Thanks in advance.

I directly got in touch with the original developer of FormValidation and he stated that this is something we cannot achieve using html attributes.
So we wont be able to achieve this without modifying the core plugin itself.
Hope this helps anyone who was looking for the same answer.

I just run into this problem.
As a workaround I use this trick:
var fv = form.fv;
fv.updateValidatorOption(input.name, 'identical', 'compare', function(){
return inputConfirm.value;
});
Of course in a entry point where I init validation for all forms in a loop I save instance in form prop: form.fv = fv;

Trouble adding data-parsley-pattern programmatically

I'm using Parsley, and it's great! I want to add different validators programmatically, depending on locale, using javascript/JQuery. When I hard-code like so:
<input type="text" id="billingPostalCode"
name="userInput_billingPostalCode"
value='<c:out value="${param.billingPostalCode}"></c:out>'
class="form-control" required=""
data-parsley-pattern="^\d{5}(?:[-\s]\d{4})?$"
data-parsley-error-message="Valid Zip/Postal Code Required"></input>
it works great. However, when I try to add it programmatically, it doesn't. I have this in a .jsp file:
<input type="text" id="billingPostalCode"
value='<c:out value="${param.billingPostalCode}"></c:out>'
class="form-control" required=""
data-parsley-error-message="Valid Zip/Postal Code Required">
</input>
And this in .js:
$('#billingPostalCode').attr('data-parsley-pattern', "^\d{5}(?:[-\s]\d{4})?$");
The attribute gets added (I can inspect the element and see it), but it doesn't validate correctly (it sees valid input as invalid). I have tried placing the JQuery code both before and after attaching parsley to the form:
[here...]
$('#paymentInfoForm').parsley( ... );
[and here...]
I have also experimented with the regex, anchored and unanchored, simplified versions, etc. But like I said, the regex works perfectly when it's hard-coded.
Could there be some interference with JSP? Am I missing something? Thanks in advance.

I worked around this by using [0-9] instead of /d in my regular expression. It does seem to be a bug, though. This works as expected:
$('#billingPostalCode').attr('data-parsley-pattern', "[0-9]{5}(?:[-\s][0-9]{4})?");
but the following code not won't validate anything, and will even break hard-coded validation:
$('#billingPostalCode').attr('data-parsley-pattern', "\d{5}(?:[-\s]\d{4})?");
The problem must be specific to javascript, since it works when hard-coded into the jsp file.

Auto suggest when write a character in input field using JavaScript

I have an input field. When I click on this input field and write something then it will show all the suggested words that I want.
Like: If I write 'c' then it will show suggested words that i declared 'C#','Code','C++'
HTML:
<input type="text" class="input_field" />
How can I do it using JavaScript? Thank you.

Please refer for the auto complete http://jqueryui.com/autocomplete/

You may try following. It is my favourite at least.
Twitter Typeahead JS

How can I get the value of an HTML variable and store it inside a javascript variable?

I have this line of code here. This is pretty much a textfield in HTML that gets the value typed in and stores it in the id called "inpKeyword."
<input type="text" name="keyword" value="Keyword" size="25" id="inpKeyword"/> <!-- enter search term -->
I need to have that value stored in a javascript var variable. Can someone please help me? I've been stuck on this problem for the past couple hours. Thanks in advanced!
Btw, this is all in a JSP page.

Have you tried this?
var val = document.getElementById('inpKeyword').value;

Alternatively, you could use jQuery:
var value = $('#inpKeyword').val();

Long form validation in JavaScript / jQuery

I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.

Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!

If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});

Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).

Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/

I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?