Hi Craig

Can't remember exactly - But it should be possible to setup some conditional stuff in Contour.

But another way around it could be to add some jQuery to validate if one or the other field has been populated outside the Contour scope - It should be possible to target the #contour id and then keep an eye on those fields and then append or prepend messages if needed different places in the DOM.

Hope this makes sense.

/Jan

Hi Jan,

Thanks for your time. I can't see anything in the Conditional 'stuff' that would do the job I can show/hide fields based upon other fields but I always want both fields visible. Once again I completely overlooked jQuery (!) I'll have a play with that! Thinking about it though I don't know when to fire the validation......

Any thoughts?

Hi Craig

Yeah it's also one of those things that are easy to overlook sometimes :) - You could do it on "Submit" perhaps?

/Jan

To be honest I don't know how to hook into the submit button!

Hi Craig

You should be able to do something like

$('#contour form').on('submit', function(){
   console.log('Submitting');
});

If my memory is correct there should be a form tag rendered...or is it part of a webform?

/Jan

Hi Jan,

This is what of got that sorta works (need to sort the variable setting).

$(".contourNavigation input[type=submit]").click(function( event ) {

var submission;

submission = "true";

$(".datepickerfield").each(function(index) {

if ( $( this ).val() == "")

{

submission = "false";

}

if (submission = "false")

{

alert("Both not populated");

}

});

});

So my next question is this......I've removed (in Contour) the mandatory flag on these fields and I'm going to control their validation in script.....how would I then stop the form from actually submitting if I need to?

Hi Craig

If you hook into the submit event instead you should be able to handle it like the example displayed here http://api.jquery.com/submit/ - Try having a look at the first demo.

Hope this helps.

/Jan

That's what I was looking at! Spooky.

but event.preventDefault()

Isn't stopping the form from submitting. So close but yet so far away!

Have you changed your code since the former post? If so please share :)

/Jan

Hi Jan,

Apologies for the delay:

Here's the code that I've got so far. I'm hitting the 'Submission = "false"' area but the preventDefault isn't stopping the form from actually firing.

<script>

$(".contourNavigation input[type=submit]").click(function( event ) {

var submission;

submission = "true";

$(".datepickerfield").each(function(index) {

if ( $( this ).val() == "")

{

submission = "false";

}

});

if (submission = "false")

{

alert("Both not populated");

event.preventDefault();

}

});

</script>

Hi Craig

Have you tried using .submit() instead of click() as I suggested in a former post?

/Jan

hi Jan,

Sorry I didn't even notice you'd typed 'submit' but sadly I can't seem to get a handle on the button firing using submit: For instance:

    $(".contourNavigation input[type=submit]").click(function( event ) {

alert("Button Pressed");

});

Will fire when the button is clicked. Whereas

$("#contour_form_RegisterNow").submit(function( event ) {

alert("Button Pressed");

});

Doesn't fire the event. I just can't seem to 'get' the button using the submit function......

It's strange that the form itself doesn't have an ID or class

<form action="" enctype="multipart/form-data" method="post" novalidate="novalidate">

Hi Craig

Ok, can you show some more HTML code so it's possible to see the whole context? I suspect it's just because you need to write something like $(".contourNavigation form").submit()...but need to see the context to be more accurate :)

/Jan

Apologies for the size: (!)

 <div id="contour_form_RegisterNow" class="contour registernow">
    <form action="" enctype="multipart/form-data" method="post" novalidate="novalidate">
        <input name="__RequestVerificationToken" type="hidden" value="qlWqpIoCqgKQN7kRJwatQ-rreAJmjcIQ4BHNRkoVaqbW5yILNJE5n0QfFoXB0F2ouFw-O2UQUEITj6O0JfTaiM9vcAC1EA-wErMfqT7MmrU1"><input data-val="true" data-val-required="The FormId field is required." id="FormId" name="FormId" type="hidden" value="c11ef913-c3fe-4f95-a479-63c103aa8a7e">            <input type="hidden" name="FormStep" id="FormStep" value="1">
        <input type="hidden" name="NextStep" id="NextStep" value="">
        <input type="hidden" name="PrevStep" id="PrevStep" value="">
        <input type="hidden" name="RecordId" id="RecordId">
        <input type="hidden" name="PreviousClicked" id="PreviousClicked" value="">
        <div class="contourPage">
            <h4 class="contourPageName"></h4>
            <fieldset class="contourFieldSet">
                <legend>Register Now</legend>
                <div class="contourField title dropdownlist mandatory">
                    <label for="171273e7-fd27-410f-a28a-2f66cfae88df" class="fieldLabel">Title <span class="contourIndicator">*</span></label>                                <div>
                        <select name="171273e7-fd27-410f-a28a-2f66cfae88df" id="171273e7-fd27-410f-a28a-2f66cfae88df" data-val="true" data-val-required="This must be completed" aria-required="true" class="input-validation-error" aria-describedby="171273e7-fd27-410f-a28a-2f66cfae88df-error">
                            <option value=""></option>
                            <option value="Mr">Mr</option>
                            <option value="Mrs">Mrs</option>
                        </select>

                        <span class="field-validation-error" data-valmsg-for="171273e7-fd27-410f-a28a-2f66cfae88df" data-valmsg-replace="true"><span id="171273e7-fd27-410f-a28a-2f66cfae88df-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField firstname textfield mandatory alternating">
                    <label for="9c502054-1d49-4cb0-8c52-8b3277dda635" class="fieldLabel">First Name <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="9c502054-1d49-4cb0-8c52-8b3277dda635" id="9c502054-1d49-4cb0-8c52-8b3277dda635" class="text input-validation-error" value="" maxlength="500" data-val="true" data-val-required="This must be completed" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;" aria-required="true" aria-describedby="9c502054-1d49-4cb0-8c52-8b3277dda635-error">
                        <span class="field-validation-error" data-valmsg-for="9c502054-1d49-4cb0-8c52-8b3277dda635" data-valmsg-replace="true"><span id="9c502054-1d49-4cb0-8c52-8b3277dda635-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField lastname textfield mandatory">
                    <label for="d243f90a-f108-4e6d-8983-6890343dfb8c" class="fieldLabel">Last Name <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="d243f90a-f108-4e6d-8983-6890343dfb8c" id="d243f90a-f108-4e6d-8983-6890343dfb8c" class="text input-validation-error" value="" maxlength="500" data-val="true" data-val-required="This must be completed" aria-required="true" aria-describedby="d243f90a-f108-4e6d-8983-6890343dfb8c-error">
                        <span class="field-validation-error" data-valmsg-for="d243f90a-f108-4e6d-8983-6890343dfb8c" data-valmsg-replace="true"><span id="d243f90a-f108-4e6d-8983-6890343dfb8c-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField address textarea mandatory alternating">
                    <label for="327fda64-24f0-45cc-a1fe-d4e21c83f68f" class="fieldLabel">Address <span class="contourIndicator">*</span></label>                                <div>
                        <textarea name="327fda64-24f0-45cc-a1fe-d4e21c83f68f" id="327fda64-24f0-45cc-a1fe-d4e21c83f68f" rows="2" cols="20" data-val="true" data-val-required="This must be completed" aria-required="true" class="input-validation-error" aria-describedby="327fda64-24f0-45cc-a1fe-d4e21c83f68f-error"></textarea>
                        <span class="field-validation-error" data-valmsg-for="327fda64-24f0-45cc-a1fe-d4e21c83f68f" data-valmsg-replace="true"><span id="327fda64-24f0-45cc-a1fe-d4e21c83f68f-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField postcode textfield mandatory">
                    <label for="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411" class="fieldLabel">Postcode <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411" id="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411" class="text input-validation-error" value="" maxlength="500" data-val="true" data-val-required="This must be completed" aria-required="true" aria-describedby="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411-error">
                        <span class="field-validation-error" data-valmsg-for="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411" data-valmsg-replace="true"><span id="1d56e35a-02ca-4a4d-82ca-dc9fc51ff411-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField telephonenumberincludingstdcode textfield mandatory alternating">
                    <label for="cdba5bf9-170b-404e-9bdf-ed11f88c3d39" class="fieldLabel">Telephone Number (including STD Code) <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="cdba5bf9-170b-404e-9bdf-ed11f88c3d39" id="cdba5bf9-170b-404e-9bdf-ed11f88c3d39" class="text input-validation-error" value="" maxlength="500" data-val="true" data-val-required="This must be completed" aria-required="true" aria-describedby="cdba5bf9-170b-404e-9bdf-ed11f88c3d39-error">
                        <span class="field-validation-error" data-valmsg-for="cdba5bf9-170b-404e-9bdf-ed11f88c3d39" data-valmsg-replace="true"><span id="cdba5bf9-170b-404e-9bdf-ed11f88c3d39-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField carinsurancerenewaldate datepicker mandatory">
                    <label for="f3894554-3f10-40b6-a51c-d251d4b4d85c" class="fieldLabel">Car Insurance Renewal Date <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="f3894554-3f10-40b6-a51c-d251d4b4d85c" id="f3894554-3f10-40b6-a51c-d251d4b4d85c" class="datepickerfield hasDatepicker input-validation-error" value="" data-val="true" data-val-required="This must be completed" aria-required="true" aria-describedby="f3894554-3f10-40b6-a51c-d251d4b4d85c-error">
                        <span class="field-validation-error" data-valmsg-for="f3894554-3f10-40b6-a51c-d251d4b4d85c" data-valmsg-replace="true"><span id="f3894554-3f10-40b6-a51c-d251d4b4d85c-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField homeinsurancerenewaldate datepicker mandatory alternating">
                    <label for="a28c9904-b187-4607-bc7e-7fb1b46487be" class="fieldLabel">Home Insurance Renewal Date <span class="contourIndicator">*</span></label>                                <div>
                        <input type="text" name="a28c9904-b187-4607-bc7e-7fb1b46487be" id="a28c9904-b187-4607-bc7e-7fb1b46487be" class="datepickerfield hasDatepicker input-validation-error" value="" data-val="true" data-val-required="This must be completed" aria-required="true" aria-describedby="a28c9904-b187-4607-bc7e-7fb1b46487be-error">
                        <span class="field-validation-error" data-valmsg-for="a28c9904-b187-4607-bc7e-7fb1b46487be" data-valmsg-replace="true"><span id="a28c9904-b187-4607-bc7e-7fb1b46487be-error" class="">This must be completed</span></span>
                    </div>
                </div>
                <div class="contourField age dropdownlist mandatory">
                    <label for="dfddb2e4-63d9-4c95-b8c3-251ca4c93667" class="fieldLabel">Age <span class="contourIndicator">*</span></label>                                <div>
                        <select name="dfddb2e4-63d9-4c95-b8c3-251ca4c93667" id="dfddb2e4-63d9-4c95-b8c3-251ca4c93667" data-val="true" data-val-required="This must be completed" aria-required="true" class="input-validation-error" aria-describedby="dfddb2e4-63d9-4c95-b8c3-251ca4c93667-error">
                            <option value=""></option>
                            <option value="17 - 30">17 - 30</option>
                            <option value="31 - 50">31 - 50</option>
                            <option value="50+">50+</option>
                        </select>

                        <span class="field-validation-error" data-valmsg-for="dfddb2e4-63d9-4c95-b8c3-251ca4c93667" data-valmsg-replace="true"><span id="dfddb2e4-63d9-4c95-b8c3-251ca4c93667-error" class="">This must be completed</span></span>
                    </div>
                </div>
            </fieldset>
            <div class="contourField" style="display:none">

                <label for="c11ef913-c3fe-4f95-a479-63c103aa8a7e">Message</label>
                <div>
                    <input type="text" id="c11ef913-c3fe-4f95-a479-63c103aa8a7e" name="c11ef913-c3fe-4f95-a479-63c103aa8a7e">
                </div>
            </div>
        </div>
        <div class="contourNavigation">
            <input type="submit" value="Submit">
        </div>
    </form>
</div>

Hi Craig

Ok, try targetting this

$(".registernow form").submit(function(){

  //Try your code here

});

I think that should work.

/Jan

Argh!

Thanks but that doesn't fire!

<script>

$(".registernow input[type=submit]").click('submit',function(event){

 //Try your code here

alert('Hello');

event.preventDefault();

});

</script>

This does fire on the button click but event.preventDefault() doesn't stop the form from posting!

Confused.com!

Hi Craig

Does it help any to switch the position of your alert and your event.preventDefault() so it's first in the code?

/Jan

Argh!

Nah, it doesn't fire I move the code so that's it's first.

:(

is working on a reply...