locked
Function still executing without required fields being filled out. RRS feed

  • Question

  • User-1866001902 posted

    Function still executing without required fields being filled out. I need the form to validated then create the barcode but will still execute without required fields being empty

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="/SiteAssets/style.css">
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    <script src="/SiteAssets/qr.js"></script>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
      <script src="//code.jquery.com/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
      
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
    	  function generatefn() {
    	  var data = [DT.value, DL.value, MIL.value, ITN.value, LTN.value, TubeDiameter.value, TubeWall.value, HTN.value, Vendor.value, UID.value].join("*");
          		  onLoadQrCode(data, 'DivImage');             
              }
        </script>
    
        <script type="text/javascript">
            $(function () {
                //the list which you want to query, replace with your own list name.
                var listName = 'Name';
                $.ajax({
                    // use below REST api to retrive all list items  
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items?$select=ID,Title",
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                    success: (function (data, textStatus, jqXHR) {
                        $.each(data.d.results, function (key, value) {
                            // get each item 
                            var ID = value.ID;
                            var title = value.Title;
                            $('#Vendor').append($('<option>', {
                                value: title,
                                text: title
                            }));
                        });
                    }),
                    error: (function (xhr, ajaxOptions, thrownError) {
                        alert('Request failed: ' + xhr.status + '\n' + thrownError + '\n' + xhr.responseText);
                    })
                });
            });
    </script>
    
       <script type="text/javascript">
            $(function () {
                //the list which you want to query, replace with your own list name.
                var listName = 'Wall';
                $.ajax({
                    // use below REST api to retrive all list items  
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items?$select=ID,Title",
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                    success: (function (data, textStatus, jqXHR) {
                        $.each(data.d.results, function (key, value) {
                            // get each item 
                            var ID = value.ID;
                            var title = value.Title;
                            $('#Wall').append($('<option>', {
                                value: title,
                                text: title
                            }));
                        });
                    }),
                    error: (function (xhr, ajaxOptions, thrownError) {
                        alert('Request failed: ' + xhr.status + '\n' + thrownError + '\n' + xhr.responseText);
                    })
                });
            });
        </script>
       <script type="text/javascript">
            $(function () {
                //the list which you want to query, replace with your own list name.
                var listName = 'Diameter';
                $.ajax({
                    // use below REST api to retrive all list items  
                    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items?$select=ID,Title",
                    type: "GET",
                    headers: { "accept": "application/json;odata=verbose" },
                    success: (function (data, textStatus, jqXHR) {
                        $.each(data.d.results, function (key, value) {
                            // get each item 
                            var ID = value.ID;
                            var title = value.Title;
                            $('#Diameter').append($('<option>', {
                                value: title,
                                text: title
                            }));
                        });
                    }),
                    error: (function (xhr, ajaxOptions, thrownError) {
                        alert('Request failed: ' + xhr.status + '\n' + thrownError + '\n' + xhr.responseText);
                    })
                });
            });
        </script>
    	<style>
    form {
     
    }
     
    label {
        width: 200px;
        paLTNing-right: 24px;
    }
     
    input {
        width: 200px;
    }
     
     
     input:required {
        Border-color:red;
    }
    button {
          width: 90px;
    }
    </style>
    </head>
    <body>
    <form id="form" data-ajax="false">
    <input type="text" id="DT" value="Name" disabled>
    <bR>
    <bR>
    <input type="text" id="DL" value="Library" disabled>
    <bR>
    <bR>
    <label>ID Cert
    <input  type="text" id="MIL" placeholder="ID Cert" required>
    </label>
    <bR>
    <bR>
    <label>Item
    <input  type="text" id="ITN" placeholder="Item"required autocomplete>
    </label>
    <bR>
    <bR>
    <label>Lot
    <input  type="text" id ="LTN" placeholder="Lot"required autocomplete>
    </label>
    <bR>
    <bR>
    <label>Diameter
     <select id="Diameter">
             </select>
    </label>
    <bR>
    <bR>
    <label>Wall
        <select id="Wall">
               </select>
    </label>
    <bR>
    <bR>
    <label>Heat
    <input  type="text" id ="HTN" placeholder="Heat"required autocomplete>
    </label>
    <bR>
    <bR>
    <label>Vendor
        <select id="Name">
        </select>
    </label>
    <bR>
    <bR>
    <label>ID
    <input  type="text" id ="UID" placeholder="ID"required autocomplete>
    </label>
    <bR>
    <bR>
      
    <input class="button" type="button" id="btnGenerate" value="Generate" onclick="generatefn();"/>
     
    <div id="DivImage"></div>
    
    </div>
    </div>
    
    </form>
    </body>
    
    </html>

    Sunday, July 7, 2019 7:46 PM

All replies

  • User71929859 posted

    You can add the below code to check whether form is valid or not before executing the code

            function generatefn() {
                if ($("#form")[0].checkValidity()) {
                    var data = [DT.value, DL.value, MIL.value, ITN.value, LTN.value, TubeDiameter.value, TubeWall.value, HTN.value, Vendor.value, UID.value].join("*");
                    onLoadQrCode(data, 'DivImage');
                }
            }
    Sunday, July 7, 2019 11:37 PM
  • User-1866001902 posted

     I am getting the following error "Uncaught TypeError: Cannot read property 'checkValidity' of undefined". 

    Monday, July 8, 2019 12:36 AM
  • User71929859 posted

     I am getting the following error "Uncaught TypeError: Cannot read property 'checkValidity' of undefined". 

    With the given code, it's not possible. You have an form with the id "form" so my code should work. I tested it before posting.

    Can you post the whole code. Probably the form you are trying to access is inside an iframe or something?

    Monday, July 8, 2019 12:42 AM
  • User-1866001902 posted

    The form is on a sharepoint page with scrip editor webart

    Monday, July 8, 2019 1:31 AM
  • User839733648 posted

    Hi Steelersfan2020,

    Function still executing without required fields being filled out. I need the form to validated then create the barcode but will still execute without required fields being empty

    According to your code, the function will execute when you click the button btnGenerate even if you add the required attribute to your input.

    To achieve your requirement, you should add that function to your form and modify the button type from button to submit.

    Note: If you use submit on form, then it is fired only when form is submitted, which means it's correct and has all required fields filled.

    And you should modify your code like the below:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
        <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <style>
            form {
            }
    
            label {
                width: 200px;
            }
    
            input {
                width: 200px;
            }
    
    
                input:required {
                    Border-color: red;
                }
    
            button {
                width: 90px;
            }
        </style>
        <script>
            function generatefn() {
                var data = [DT.value, DL.value, MIL.value, ITN.value, LTN.value, Diameter.value, Wall.value, HTN.value, Vendor.value, UID.value].join("*");
                alert(data);// for testing 
            }
        </script>
    </head>
    <body>
        <form id="form" onsubmit="generatefn();">
            <input type="text" id="DT" value="Name" disabled>
            <bR>
            <bR>
            <input type="text" id="DL" value="Library" disabled>
            <bR>
            <bR>
            <label>
                ID Cert
                <input type="text" id="MIL" placeholder="ID Cert" required>
            </label>
            <bR>
            <bR>
            <label>
                Item
                <input type="text" id="ITN" placeholder="Item" required >
            </label>
            <bR>
            <bR>
            <label>
                Lot
                <input type="text" id="LTN" placeholder="Lot" required>
            </label>
            <bR>
            <bR>
            <label>
                Diameter
                <select id="Diameter"></select>
            </label>
            <bR>
            <bR>
            <label>
                Wall
                <select id="Wall"></select>
            </label>
            <bR>
            <bR>
            <label>
                Heat
                <input type="text" id="HTN" placeholder="Heat" required>
            </label>
            <bR>
            <bR>
            <label>
                Vendor
                <select id="Vendor"></select>
            </label>
            <bR>
            <bR>
            <label>
                ID
                <input type="text" id="UID" placeholder="ID" required>
            </label>
            <bR>
            <bR>
    
            <input type="submit" id="btnGenerate" value="Generate"/>
    
            <div id="DivImage"></div>
    
        </form>
    </body>
    </html>

    result:

    For more, you could refer to the similar issue: how to make javascript alert not run until all required fields are filled

    Best Regards,

    Jenifer

    Monday, July 8, 2019 6:24 AM