App connect issue with Bootstrap Modal Form using jQuery Validate

I have an issue with a form submission where the form is located in a modal. The form is using jQuery Validate plugin. My issue is if the form is submitted with errors the modal closes.
this appears to be an App Connect issue because if I remove the ‘dmx-app’ reference from the body tag it resolves the issue. I of course need App Connect for the Animation effects used on the page.

Is there an adjustment I can make so App Connect doesn’t effect the function of the Modal Form using jQuery Validate?

Thanks in advance!

So how do you close the modal?

Well if the form is validated the form data is inserted into the database and re-directed to a success page ( i’ve used WebAssist for this part ).
Usually if there is errors in the form then the modal stays open and displays the error messages form the jQuery Validate Setup.

Is this a modal created with our tools? How is it related to the jquery plugin? How do you control the modal using this plugin?

I created the modal manually outside of Wappler. the reason being I am on the learning curve with wappler and didn’t have the time to learn and develop on this particular project.

The Modal is just a basic BS4 setup with custom sass/css and of course the jQuery Plugin.

Would it help to post up some code?

Maybe post the modal code where we can see how is the form set up and some code for the plugin you are using which controls the modal. Or maybe post a link to your page where we can check this …

Unfortunately I only have this on a local server and github so I can’t post a link. Can you remind me the best way to post up chunks of code? is it simply tagged or is there another way for larger parts?

thanks

If it’s a public repo you can share the link to there.
Otherwise:

yes its a public repo…So i’ll try that first. Cheers! :+1:t3:

Experiencing an issue with my repo as it was actually private. tried to change to public and now its stuck in location change.

So for now ill give some code here and see how we go.

So the modal is as follows:

<div id="quoteModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          
          <h4 class="modal-title">Right to Manage Estimate Form.</h4>
            <button type="button" class="close" data-dismiss="modal" name="Close Modal" aria-label="Close Modal">&times;</button>
        </div>
        <div class="modal-body">
          <p class="alert alert-info">Please complete the form below. Your estimate will be emailed to you after submitting the form.</p>
          <div id="quote-form_ProgressWrapper">
            <form method="post" name="quote_form" id="quote-form" class="form-horizontal" action="">
              <div id="details">
                <div class="row mb-3">
                  <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="email" id="email" maxlength="60" value="" placeholder="Email">
                  </div>
                    <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="email_confirm" id="email-confirm" maxlength="60" value="" placeholder="Confirm Email">
                  </div>
                </div>
                
                <div class="row mb-3">
                  <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="fname" id="fname" minlength="2" maxlength="25" value="" placeholder="First name(s)">
                  </div>
                  <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="surname" id="surname" minlength="2" maxlength="25" value="" placeholder="Surname">
                  </div>
                </div>
                <div class="row mb-3">
                  <div class="form-group col-lg-8">
                    <input type="text" class="form-control" name="property_name" id="property-name" value="" maxlength="30" placeholder="Property name or street address">
                    <small>(If your property does not have a name, enter the Street Address instead)</small>
                  </div>
                  <div class="form-group col-lg-4">
                    <input type="text" class="form-control" name="postcode" id="postcode" value="" placeholder="Post code">
                  </div>
                </div>
                <div class="row total-flats mb-4">
                  <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="num_of_blocks" id="num-of-blocks" value="" placeholder="Number of detached buildings">
                    <small>If your premises is comprised of multiple detached buildings, the estimate assumes all buildings are under the same freehold title.</small>
                  </div>
                  <div class="form-group col-lg-6">
                    <input type="text" class="form-control" name="total_flats" id="total-flats" value="" placeholder="Total number of flats">
                  </div>
                </div>
              </div>
              <div class="mb-3" id="options">
                <p class="mb-2">Please select any of the following to indicate your current status with regard to your interest in Right to Manage.</p>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="status[]" value="1">
                    We have more than 50% leaseholders in support and are ready to start RTM process. </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="status[]" value="2">
                    We are exploring our options and will then canvas support. </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="status[]" value="3">
                    We have started RTM and need help to continue. </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="status[]" value="4">
                    We are a mananging agent acting for leaseholders </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" name="status[]" value="5">
                    Other </label>
                </div>
              </div>
              <div id="contact-options">
                <p>It is our standard practice to telephone recipients the next working day following receipt of your estimate to ensure the information is understood and answer any questions that may arise. In our experience this is usually more helpful than email alone.</p>
                <p>If you are happy to receive this call please indicate the preferred telephone number for contact and the preferred time of day. If you prefer email contact only please select the option underneath.</p>
                <div class="row phone mt-2 mb-2">
                  <div class="col-md-6">
                    <input type="text" class="form-control" name="telephone" id="telephone" value="" placeholder="Telephone">
                  </div>
                </div>
                <div class="form-group time-pref">
                  <label class="radio-inline tp-label">Prefered time:</label>
                  <label class="radio-inline">
                    <input type="radio" name="conpref" id="9to1" value="9am to 1pm" >
                    9:00am to 1:00pm</label>
                  <label class="radio-inline">
                    <input type="radio" name="conpref" id="2to6" value="2pm to 6pm" >
                    2:00pm to 6:00pm</label>
                  <label class="radio-inline">
                    <input type="radio" name="conpref" id="6to8" value="6pm to 8pm" >
                    6:00pm to 8:00pm</label>
                  <label class="radio-inline con-email mt-2">
                    <input type="radio" name="conpref" value="Email only" >
                    I prefer to be contacted by email.</label>
                </div>
              </div>
              <input type="submit" role="button" class="btn-green" name="submit_quote" id="submit-quote" value="Submit" aria-label="Get Estimate">
              <input type="hidden" name="date" id="date" value="<?php echo date("Y-m-d H:i:s"); ?>">
              <input type="hidden" name="enq-det-id" value="<?php echo $_SESSION['enquiryDetID']; ?>" >
              <input type="hidden" name="quote" id="quote" value="<?php echo($totalQuote); ?>">
              <br clear="all">
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

jQuery link:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

And here’s jQuery Validate setup:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.js"></script>
<script>jQuery.extend(jQuery.validator.messages, {
    max: jQuery.validator.format("A maximum of 20 blocks can be entered."), min: jQuery.validator.format("A minimum of 1 block is required")
}

);
</script>
<script>
/*<![CDATA[*/

$(document).ready(function() {
    jQuery.validator.addMethod("noSpace", function(b, a) {
        return b.indexOf(" ")<0&&b!=""
    }
    , "No spaces please");
	
    jQuery.validator.addMethod("phoneUK", function(a, b) {
        return this.optional(b)||a.length>9&&a.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/)
    }
    , "This is not a valid phone number");
    $.validator.addMethod("postcodeUK", function(b, a) {
        return this.optional(a)||/^((([A-PR-UWYZ][0-9])|([A-PR-UWYZ][0-9][0-9])|([A-PR-UWYZ][A-HK-Y][0-9])|([A-PR-UWYZ][A-HK-Y][0-9][0-9])|([A-PR-UWYZ][0-9][A-HJKSTUW])|([A-PR-UWYZ][A-HK-Y][0-9][ABEHMNPRVWXY]))\s?([0-9][ABD-HJLNP-UW-Z]{2})|(GIR)\s?(0AA))$/i.test(b)
    }
    , "This is not a valid UK postcode");
	
	jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters");
	
    $("#quote-form").validate( {
        rules: {
			email: {
                required: true, email: true
            }
			, email_confirm: {
				required: true,
				equalTo: '#email'
			}
            , fname: {
                required: true, lettersonly: true
            }
            , surname: {
                required: true, noSpace: true, lettersonly: true
            }
            , telephone: {
                phoneUK: true
            }
            , property_name: {
                required: true
            }
            , postcode: {
                required: true, postcodeUK: true
            }
            , num_of_blocks: {
                required: true, digits: true, range: [1, 20]
            }
            , total_flats: {
                required: true, digits: true, range: [2, 1000]
            }
			, 'status[]': {
				required: true
			}
			, telephone: {
				required: {
					depends: function(element) {
						return $('#9to1').is(':checked') || $('#2to6').is(':checked') || $('#6to8').is(':checked');
					}
				}
			}
        }
        , messages: {
			email: {
                required: "An email is required", email: "This is not a valid email address"
            }
			, email_confirm: {
				required: "Please confirm your email", equalTo: "Emails do not match"
			}
            , fname: {
                required: "Your first name is required", lettersonly: "Alphabetical characters only please"
            }
            , surname: {
                required: "Your surname is required", lettersonly: "Alphabetical characters only please"
            }
            , property_name: {
                required: "The name of your property is required"
            }
            , postcode: {
                required: "The postcode is required"
            }
            , num_of_blocks: {
                required: "Please enter the number of blocks", digits: "Numeric values only please", range: "Please enter a value between 1 and 20"
            }
            , total_flats: {
                required: "Please enter the total number of flats", digits: "Numeric values only please", range: "Please enter a value between 2 and 1000"
            }
			, 'status[]': {
				required: "Please choose one of the options above"
			}
			, telephone: {
				required: "Your telephone number is required"
			}
        },
		errorPlacement: function(error, element) {
  if (element.attr("name") == "property_name") {
     error.insertAfter(".help-block");
  }
			else if (element.attr("name") == "status[]") {
     error.insertAfter("#options");
  }
			else {
     error.insertAfter(element);
  }
		}
    });
});

/*]]>*/

</script>   
<script>$("#close").click(function(){location.reload()});</script>
<script>(function(){function a(b){var e=this;e.modal=$(b);if(e.modal.length==0){return false}if(window.location.hash==b){d()}var c={open:d,close:f};return c;function d(){e.modal.modal("show")}function f(){e.modal.modal("hide")}}Window.prototype.remoteModal=a})();$(function(){window.remoteModal("#quoteModal")});</script>

Hope this helps!
Thanks in advance!

Unfortunately that won’t work. App Connect doesn’t work with third party validation scripts like this one.
Why not use the validation options from Wappler then, if you want to use app connect on this page?

Ok Thanks for taking a look.
I stopped using wappler tools for parts of the development as I’m relatively new to it and was experiencing numerous problems that weren’t getting resolved. I reverted back to Dreamweaver using JQuery Validate as it was easier and quicker for me.

I will see if I can use Wappler validation for this particular page. But it concerns me with the problems I faced a while back due to my level of experience. I’ll see how I get on!