7

I have multiple form input elements. I would like to add a pattern attribute and a title attribute to each one, but rather than do so manually, I want to dynamically add the same pattern and title to each form input using JavaScript/jQuery.

This is what the form input fields look like now:

<input type="text" class="form-control" id="paycheck" />
<input type="text" class="form-control" id="investments" />
<input type="text" class="form-control" id="otherIncome" />

As an end result I would like each form input to look like the following:

<input pattern="\d*\.?\d*" title="blah blah blah" type="text" class="form-control" id="paycheck" />
etc...

As examples, I've tried the following for the pattern attribute, but none of them work:

$( "input" ).attr("pattern", '\d*\.?\d*');
$( "input" ).attr("pattern",  \d*\.?\d* );
$( ".formClass input" ).attr("pattern", '\d*\.?\d*');

$( "input" ).prop("pattern", '\d*\.?\d*');
$( "input" ).prop("pattern",  \d*\.?\d* );
$( ".formClass input" ).prop("pattern", '\d*\.?\d*');

...imagine something similar for the title attribute...
9
  • 2
    Seems to work perfectly fine for me -> jsfiddle.net/b8RmX
    – adeneo
    Commented Dec 7, 2013 at 22:27
  • hmm, you're right... that's odd...
    – neuquen
    Commented Dec 7, 2013 at 22:29
  • Of course, a pattern is really only useful for required elements in a form that is validated.
    – adeneo
    Commented Dec 7, 2013 at 22:29
  • Do the elements need to be required?
    – neuquen
    Commented Dec 7, 2013 at 22:31
  • add the pattern attr to your initial elements. Other wise .attr will not add the attribute itself. set one or more attributes for every matched element.. Just leave the attr blank like pattern="" on the input elements.
    – Vigs
    Commented Dec 7, 2013 at 22:32

1 Answer 1

8

In the end, I found that the syntax was correct. There was an error somewhere else in the code preventing that statement from being run. Just goes to show that you should always make sure everything is good elsewhere in your code first.

However, I did learn a few things from this which I will note for others:

  1. The jQuery .attr() function will dynamically add any attribute you specify, so you don't need to put pattern="" in your form elements first in order for the value to be added or changed.
  2. Of important note, if you are going to dynamically add a regex using jQuery, YOU NEED TO ESCAPE certain characters.

The regex was originally \d*\.?\d* but in the DOM it was showing up as d*.?d* so when sending the regex through jQuery I escaped the backslashes like so: \\d*\\.?\\d*.

  1. Finally, I did not have to make my fields required for the regex to work. The HMTL5 validation only threw an error for me if I included incorrect text in the field, and when it threw an error, the form was not submitted. If I left the fields empty or put correct text in the fields, then no error was thrown. I'm up for an explanation if I'm wrong.
4
  • 1
    The regular expression \d*\.?\d* matches zero or more digits then zero or one full stop then zero or more digits - so an empty string (or a single full stop character) will be matched by it and be a valid input. If you want to make it so a number is required then use \d+(\.\d*)?|\.\d+ which will match numbers in with various formats including: 01234 or 01234. or 012.34 or .01234 but will not match an empty string or a single full stop character.
    – MT0
    Commented Dec 8, 2013 at 0:42
  • @MT0 Perfect. Thanks. I didn't even realize just a full stop worked. You're regex works even better.
    – neuquen
    Commented Dec 8, 2013 at 0:53
  • \ is an escape character for both strings and regular expressions and you are passing a string to .attr() for use in a regular expression then you need to escape the escape character (i.e. use \\ ) in the string so it will still be present in regular expression. You can see the same if you compare the two different ways of declaring a regular expression in JavaScript: using a regular expression literal /\d+/ vs. passing a string to the constructor of the RegExp object new RegExp( '\\d+' ) - both create the same RE but you need to double escape the string but not the literal.
    – MT0
    Commented Dec 8, 2013 at 0:58
  • The issue I was having was due to the backslashes. I escaped them by doubling them and that solved my issue.
    – Andrew
    Commented Sep 13, 2017 at 3:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.