locked
using jquery validate within DIV tag RRS feed

  • Question

  • User-2132746437 posted

    Is it possible to validate controls in DIV tag instead of form with the JQuery Validate plug in?

    example:

    <div class="cars">
    Name:  <input type="text" id="name" required/>
    Cars:  <select name="carsManu" required> 
             <option>select one</option>
             <option>Ford</option>
             <option>Chevy</option>
            </select>
    
    New/Used <input type="radio" name="type" value="New" required>New<br>
             <input type="radio" name="type" value="Used" required>Used
    
    </div>

    For the radio buttons, the question is required, so only one has to be selected, not both, how can I used the JQuery validate plug in to validate this form, and force the user to select only 1 radio button not both.  This code is in partial view for an MVC app

    Tuesday, September 24, 2019 11:27 AM

All replies

  • User475983607 posted

    By definition you can only select one radio button.  Simply set one of the radios as the default selection and remove required.

    The rest of your question is a bit confusing.  It's not clear why the radio is not within a form unless you've built a JavaScript XHR application.  

    Tuesday, September 24, 2019 12:17 PM
  • User-2132746437 posted

    take the radio out of the question. The HTML is populating a DIV tag that resides on an MVC page. I need to validate the controls on the page in the DIV tag, so if they're required, validate them

    Tuesday, September 24, 2019 1:36 PM
  • User475983607 posted

    csharpcoder

    take the radio out of the question. The HTML is populating a DIV tag that resides on an MVC page. I need to validate the controls on the page in the DIV tag, so if they're required, validate them

    jQuery validation will not work as the library expects form elements to be within a form.  The elements are validated when the form is submitted.  I beleice oy ucan simply validate any element you like by name.  It's all in the jQuery validate docs; https://jqueryvalidation.org/Validator.element/

    I showed you how to get all the required elements on a page using a selector in your similar thread; https://forums.asp.net/p/2159837/6278417.aspx?Re+dynamic+form+validation. I even illustrated some of the pitfalls which you know find yourself.

    The concept is the same as your previous thread but you need to write code to validate radios, checkboxes, and selects.  

    Tuesday, September 24, 2019 1:54 PM
  • User288213138 posted

    Hi csharpcoder,

    You can try to use jQuery Validate plugin. Its purpose is to perform client-side form validation of user entered data.

    More information you can refer to this link: https://jqueryvalidation.org/

    The demo for you:

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
        <script>
            $(document).ready(function () {
                $("#form1").validate({
                    rules: {
                        first_name: {
                            required: true
                        },
                        last_name: {
                            required: true
                        },
                        phone: {
                            required: true,
                          
                        }
                    }
                });
            });
        </script>
    
    
    <form id="form1">
            <input type="text" name="first_name" /><br />
            <input type="text" name="last_name" /><br />
            <input type="text" name="phone" /><br />
            <input type="submit" />
        </form>

    The result:

    Best regards,

    Sam

    Wednesday, September 25, 2019 2:33 AM
  • User-2054057000 posted

    You have to enclose it within form tag for the validations to work.

    <form id="form1">
    <div class="cars">
    //...
    </div>
    </form>

    If you don't wan't to use the form tag then you have to do the validations manually with jQuery. Refer - jQuery Validation of Email, Number. Dropdown, Checkbox & Radio Button

    Wednesday, September 25, 2019 9:40 AM