Forums

Hi.

I have an issue with the validation of one input field. The error message displays at the top of the page but not next to the element.

I first created the form using the wizard. Then i had to finish the form using custom code. The element which is not validating was added later. Do i need to add an error message div? i.e.
<div id="error-message-card_type"></div> I have tried this but still not working.

You help would be greatly appreciated.

Hi Glens,

You need to add the error message div where the error should appear, what's your field name ?

And do the errors show below other fields except this one ?

Regards,
Max

Hi.

Sorry for the late reply. I have been away.

The field name was card_type and the error message div was <div id="error-message-card_type"></div>. Yes, all of the other fields were showing an error message next to the element.

Anyway, don't worry about this for now as I have bigger issues with the JS validation.

1. Only one of the fields validates at a time. For example, if i press the submit button, i get only one error message and that message is half-way off the screen. I have tried switching from "Tips" to "after element" and the message is in the correct place only the message is squashed on some checkbox elements.

2. The validation should be onsubmit & onblur. Again, this works only once. If you tab away from the input an error message is displayed if it is empty. If you tab away again, no error message is displayed.

I notice various other issues but i think they all relate to point 1.

Your help would be greatly appreciated as i am under pressure to get these forms working. Below is a link to the form.

EDIT: url removed

Thanks

Also, one thing that would be very useful is if i could validate each section when the user clicks on the "next" button.

Hi. Your assistance would be greatly appreciated.

Thanks

Hi Glens,

I suggest that you add 1 submit button below all sections (under the slider) and that should fire the validation and open the correct slider if there is some field invalidated (assuming you are using the Chronoforms sliders).

The errors display one by one, you can't show all of them at once, that would be even a problem with your multi section form!

Regards,
Max

Hi. Thanks for the reply. I have manage to get it working although I was using custom slides. I'm not a JS coder but if anyone is interested here is a basic outline of what i did...

html

<a href="#" id="s2" >slide header</a>
<div class="slide1">
<input type="text" name="name" required />
<div class="next_button">NEXT</div>
</div>

<a href="#" id="s3" >slide header</a>
<div class="slide2">
<input type="text" name="name" required />
<div class="next_button">NEXT</div>
</div>

etc..

JS

jQuery(document).ready(function () {
function stepvalid(e)
 {
     //loops through the inputs in the slide that have a "required" attribute and checks if input is empty
     var isinvalid = 0;
        jQuery(".slide" + e + " :input[required]").each(function (index) {
            if (jQuery(this).val() == '') {
                isinvalid = isinvalid + 1;
               //if input is empty display error message
                    if (jQuery(this).prev().find('.err-msg').length == 0) {
                        jQuery(this).prev().append("<div class='err-msg'>This field is required</div>");
                    
                    }
                }
            } else {
//remove error message if ok
 jQuery(this).prev().find('.err-msg').remove();

            }

        });

        if (isinvalid > 0) {
            return false
        } else {
            return true
        };


	jQuery('#s2, .slide1 .next_button').bind('click', function(event) {
		
		if (stepvalid(1))
		{
		jQuery('.slide2').slideToggle("fast");
		jQuery('.slide1, .slide3, .slide4').slideUp();
		}
		
	   event.preventDefault();
	});

jQuery('#s3, .slide1 .next_button').bind('click', function(event) {
		
		if (stepvalid(1))
		{
		jQuery('.slide2').slideToggle("fast");
		jQuery('.slide1, .slide3, .slide4').slideUp();
		}
		
	   event.preventDefault();
	});

etc etc...