locked
dynamic form validation RRS feed

  • Question

  • User-2132746437 posted

    I have a dynamic form that can have textboxes that may have required textboxes and textboxes that are not required. When the user clicks the save button, I want to check all fields that are required have data in them. 

    My HTML looks like this:

    <div class=”cars”>
    <table>
      <tr>
            <td>Salesmen</td>
            <td><input type=”text” class=”textbox @(Model.Required” required=”@Model.Required”/>
       </tr>
    </table>
    </div>
    

    How the HTML renders in the browser:

    <input type=”text” class=”textbox required” required=”required”/>
    
    

    My JQuery, (that's not working)

    Function validate() 
    {
    $("#cars input[required]").each(function () {
            if (!$(this).val().length) 
                alert("enter data");
            }
        });
    }
    
    

    the validation isn't firing

    Wednesday, September 18, 2019 2:10 PM

All replies

  • User-821857111 posted

    Your jquery selectors are wrong.

    $(".cars input.required").each(function () {
    Wednesday, September 18, 2019 2:46 PM
  • User-2132746437 posted

    Even changing that, the validation still not getting executed, and no errors in dev tools

    Wednesday, September 18, 2019 2:52 PM
  • User475983607 posted

    What client side validation framework are you using?  It looks like a mixture of HTML 5, jQuery validate, and a custom solution.  Pick one validation approach and design your code around the selected approach.  Read the documentation so you understand how the framework function

    https://jqueryvalidation.org/

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

    If you are building a custom framework the and need a jQuery selector to select the "required" attribute then...

    $('input,textarea,select').filter('[required]').each(...

    ..but I recommend you use an established library rather than building your own. 

    https://stackoverflow.com/questions/18659726/jquery-find-all-the-visible-required-fields

    Client side validation is only good for the user experience and is not secure.  You'll need to design a server side validation approach as well.

    Wednesday, September 18, 2019 2:57 PM
  • User-2132746437 posted

    The app is MVC, with JQuery, no HTML 5 is being used. I just want to validate every required textbox (right now) has data if it's empty.  I"m not able to use a plug-in for this app, this is just for the client side to make sure the fields have data

    Wednesday, September 18, 2019 3:01 PM
  • User-474980206 posted

    your selector was correct 

    "#cars input[required]"

    but javascript is case sensitive and Function is not valid.

    // assume jquery is referenced
    
    function validate() 
    {
        $("#cars input[required]").each(function () {
            if (!$(this).val().length) 
                alert("enter data");
            }
        });
    }
    
    

    but what calls this function?

    Wednesday, September 18, 2019 3:19 PM
  • User475983607 posted

    csharpcoder

    The app is MVC, with JQuery, no HTML 5 is being used. I just want to validate every required textbox (right now) has data if it's empty. 

    I recommend using an existing JavaScript library as building a custom validation framework is a large task.   With that being said, below is an a basic example using the selector in my first post which is inspired by the SO link and your validation logic.

        <div>
            <input type="text" name="mytextbox" required />
            <textarea name="mytextarea" required>
            </textarea>
            <select  name="myselect" required>
                <option value="0">--select--</option>
            </select>
        </div>
    <script>
        $('input,textarea,select').filter('[required]').each(function(index, value){
            if (!$(value).val().length) {
                console.log($(value).attr('name') + ' is empty');
            }
        });
    </script>

    Results

    mytextbox is empty

    Wednesday, September 18, 2019 3:22 PM
  • User-821857111 posted

    your selector was correct 

    "#cars input[required]"

    I don't see an element with an id of cars. I see one with a class name of cars.....

    Wednesday, September 18, 2019 3:25 PM
  • User-2132746437 posted
    <script>
        $('input,textarea,select').filter('[required]').each(function(index, value){
            if (!$(value).val().length) {
                console.log($(value).attr('name') + ' is empty');
            }
        });
    </script>


    This somewhat works, it shows me the "enter something" message even if the user has entered data in the textbox. Though, it's only hitting the one textbox even though I have 5 on the form that is required. 

    Wednesday, September 18, 2019 3:48 PM
  • User475983607 posted

    csharpcoder

    This somewhat works, it shows me the "enter something" message even if the user has entered data in the textbox. Though, it's only hitting the one textbox even though I have 5 on the form that is required. 

    The jQuery selector works.  You have a bug(s) in your validation logic.  Use Dev tools (F12) to set a break point and do some basic troubleshooting.

    Test code that works as expected.

        <div>
            <input type="text" name="mytextbox" required />
            <input type="text" name="mytextbox1" required />
            <textarea name="mytextarea" required>
            </textarea>
            <select name="myselect" required>
                <option value="0">--select--</option>
            </select>
            <input type="checkbox" name="mycheckbox" required />
            <input type="submit" name="mysubmit" value="submit" />
            <input type="text" name="mytextbox2" required />
            <input type="text" name="mytextbox3" required />
        </div>
    <script>
        $('input,textarea,select').filter('[required]').each(function(index, value){
            if (!$(value).val().length) {
                console.log($(value).attr('name') + ' is empty');
            }
        });
    </script>

    Results

    (index):92 mytextbox is empty
    (index):92 mytextbox1 is empty
    (index):92 mytextbox2 is empty
    (index):92 mytextbox3 is empty

    Notice, however, that checkboxes, selects, and textareas are not considered empty.  These elements must be validated differently.

    Wednesday, September 18, 2019 5:49 PM
  • User-2132746437 posted

    Still not working right for me and I took the code as it is. Could it be because my textboxes are wrapped in a DIV tag as in my original post? Should I find that DIV tag and then loop through the elements in that div tag that have the required tag? I see on errors when I run F12

    I got it working, my div tag had an issue in the .show()

    Wednesday, September 18, 2019 6:30 PM
  • User475983607 posted

    I got it working, my div tag had an issue in the .show()

    Another reason you should use an existing JavaScript validation library.  That way you are not reinventing the wheel.

    Wednesday, September 18, 2019 7:51 PM
  • User-2132746437 posted

    csharpcoder

    I got it working, my div tag had an issue in the .show()

    Another reason you should use an existing JavaScript validation library.  That way you are not reinventing the wheel.

    I don't have that option, or I would've

    Wednesday, September 18, 2019 8:57 PM
  • User-474980206 posted

    if you are allowed to use jQuery, why not a jQuery plugin? the are certainly better coded than what you will produce.

    Thursday, September 19, 2019 12:39 AM
  • User-2054057000 posted

    I have a dynamic form that can have textboxes that may have required textboxes and textboxes that are not required.

    Use jQuery On to attach events on dynamically created (future) elements. You haven't given your full codes, where it the button on whose click the validations work? How is the JS function 'validate' is getting called? 

    Thursday, September 19, 2019 10:55 AM