question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to add fields validation message ?

See original GitHub issue

i have to add fields validation message in my repeater template. So the message container attribute must be improved at the same time as the corresponding inputs

This is the <span> attribute data-validate-for (very important as it receives the error message with ajax if the field is not correctly filled)

is it possible using repeater library to update this attribute or i need to add jquery developpment somewhere (library hack or out of the box ?)

below the html source code

<div data-repeater-list="group-a">
		
		<!-- repeater template -->
		<div data-repeater-item style="display:none;">
                         
                        <label for="date">Date</label>
                        <input type="date" name="date" /> 
                        <span class="error_message" data-validate-for="date"></span>

                        <label for="amount">Amount</label>
                        <input type="text" name="amount" />
                        <span class="error_message" data-validate-for="amount"></span>
                        
			<input data-repeater-delete type="button" value="delete" />
		</div>
		
		<!-- first group displayed -->
		<div data-repeater-item>
                        
                        <label for="date">Date</label>
                        <input type="date" name="date" /> 
                        <span class="error_message" data-validate-for="date"></span>

                        <label for="amount">Amount</label>
                        <input type="text" name="amount" />
                        <span class="error_message" data-validate-for="amount"></span>
                       
			<input data-repeater-delete type="button" value="delete" />
		</div>

</div>

expected values after user adding item

		<!-- first group displayed -->
		<div data-repeater-item>
                         
                        <label for="date">Date</label>
                        <input type="date" name="group[1][date]" /> 
                        <span class="error_message" data-validate-for="group[1][date]"></span>

                        <label for="amount">Amount</label>
                        <input type="text" name="group[1][amount]" />
                        <span class="error_message" data-validate-for="group[1][amount]"></span>
                        
			<input data-repeater-delete type="button" value="Supprimer" />
		</div>

thanks by advance

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
pat-ochcommented, Jun 1, 2017

i hack the jquery.repeater.js a bit by adding this code (looking for adding by Pat-Och below)

        var setIndexes = function ($items, groupName, repeaters) {
            
            $items.each(function (index) {
                
                var $item = $(this);
                
                $item.data('item-name', groupName + '[' + index + ']');
                $filterNested($item.find('[name]'), repeaters)
                .each(function () {
                    
                    var $input = $(this);
            
                    // match non empty brackets (ex: "[foo]")
                    var matches = $input.attr('name').match(/\[[^\]]+\]/g);

                    var name = matches ?
                        // strip "[" and "]" characters
                        last(matches).replace(/\[|\]/g, '') :
                        $input.attr('name');

                    var newName = groupName + '[' + index + '][' + name + ']' +
                        ($input.is(':checkbox') || $input.attr('multiple') ? '[]' : '');

                    $input.attr('name', newName);

                    $foreachRepeaterInItem(repeaters, $item, function (nestedFig) {
                        var $repeater = $(this);
                        setIndexes(
                            $filterNested($repeater.find('[data-repeater-item]'), nestedFig.repeaters || []),
                            groupName + '[' + index + ']' +
                                        '[' + $repeater.find('[data-repeater-list]').first().data('repeater-list') + ']',
                            nestedFig.repeaters
                        );
                    });
                });
                //***** adding by Pat-Och
                if (fig.errorMessage) {

                    $filterNested($item.find('.' + fig.errorMessageClass), repeaters)
                        .each(function () {

                            var $span = $(this);

                            // match non empty brackets (ex: "[foo]")
                            var matches = $span.attr('data-validate-for').match(/\[[^\]]+\]/g);

                            var dataValidateFor = matches ?
                                // strip "[" and "]" characters
                                last(matches).replace(/\[|\]/g, '') :
                                $span.attr('data-validate-for');                        

                            var newDataValidateFor = groupName + '[' + index + '][' + dataValidateFor + ']' +
                                ($span.is(':checkbox') || $span.attr('multiple') ? '[]' : '');                        

                            $span.attr('data-validate-for', newDataValidateFor);

                        });
                }
                //***** end adding by Pat-Och
            });

            $list.find('input[name][checked]')
                .removeAttr('checked')
                .prop('checked', true);
        };

in repeater.js

$(document).ready(function () {
    
    $('.repeater').repeater({
        ....
        // (Optional)
        // manage fields validation message
        // 
        errorMessage: true,
        errorMessageClass: 'error_message',

    })

});
0reactions
pat-ochcommented, Feb 13, 2018

you validate your input data as usual, in the controller method which receives the input of your form. display with your debug tool the content of the input and you will see.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to add a custom validation message for the required field?
Go to Everest Forms > Settings > Validation. Now, add the message in the 'Required' option's input box.
Read more >
Set custom HTML5 required field validation message
Validation messages I want like. Required field: Please Enter Email Address Wrong Email: 'testing@.com' is not a Valid Email Address. (here, entered email ......
Read more >
Client-side form validation - Learn web development | MDN
Go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data...
Read more >
Form required attribute with a custom validation message in ...
Example: This example shows how to do HTML form required attribute along with setting custom validation message.
Read more >
How to Add Custom Validation Messages to Registration Form ...
Go to Content >> Form Fields >> Edit Field >> Advanced >> Custom Validation Message. Add Custom Validation Messages to Registration Form Fields....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found