How to validate javascript form if the code is wriiten on javascript page?

JavaScript
1 
 new jBox('Modal', {
   attach: '#Modal-7',
   width: 800,
   height: 305,
   blockScroll: false,
   animation: 'zoomOut',
   draggable: 'title',
   closeButton: true,
   content: '<form name="user_form" method="post">
<div class="modal-body">
  <div   class="new_customer">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <input name="full_name" id="full_name" autocomplete="off" placeholder="Full Name" type="text">
        </div>
        <div class="form-group">
          <input required type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="Email" name="email" id="email" class="form-control"/>
        </div>
        <div class="form-group">
          <input type="text" name="mobile" id="mobile" placeholder="Mobile" class="form-control"/>
        </div>
        <div class="form-group">
          <select name="sex" id="sex" class="form-control">
            <option>Male</option>
            <option>Female</option>
          </select>
        </div>
        <div class="form-group">
          <input type="text" placeholder="Pincode" name="pincode"  id="pincode" class="form-control"/>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <textarea type="text" name="address" id="address1" placeholder="Address" class="form-control"></textarea>
        </div>
        <div class="form-group">
          <input type="text" name="landmark" id="landmark" placeholder="Landmark" class="form-control"/>
        </div>
        <div class="form-group">
          <input type="text" name="city" id="city" placeholder="City" class="form-control"/>
        </div>
        <div class="form-group">
          <input type="text" name="state"  id="state" placeholder="State" class="form-control"/>
        </div>
        <div class="form-group">
          <input type="text" name="country" id="country" placeholder="Country" class="form-control"/>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 padd">
          <div class="button">
            <input type="button" name="submit" value="Submit" onclick="submit_form();">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</form>',
  title: '<strong>Walk In</strong>',
  title: 'New Customer',
  overlay: false,
  reposition: false,
  repositionOnOpen: false
  
 });

* Note the HTML was originally as a single line. I reformatted it to remove the need to scroll and make it more readable.
Mittineague

2

Hi @vivekkws, well that’s not even valid JS – did you mean to use template literals? However for such complex content it would probably be better to write that on the page as regular markup, and pass it to the jBox content via a jQuery object. You can then validate the form as usual.

If you have further questions please set up a runnable fiddle or something like that, and describe what exactly is not working as expected… just posting the instantiation of a jBox doesn’t really tell a lot about your issue at hand I’m afraid. :-/

3

I mean… how do you validate the form? Same way you do any form.

If the user has clicked on the submit button, the form exists, and has been instantiated. While the modal exists, the elements of the modal exist in the DOM, so you’d check them like any other form that was in the DOM.

Alternatively/additionally if possible you may want to utilize HTML validation techniques.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.