logo
down
shadow

How to make a selectbox required using jQuery?


How to make a selectbox required using jQuery?

By : user2955742
Date : November 22 2020, 10:48 AM
it fixes the issue Yes, it is possible to add the required attribute to a select element, as long as the first option has a value of "", an empty string.
NOTE: required is not supported < IE9
code :
$('select#required').attr('required',1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>

  <select id="required">
    <option value="">Please select</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>

  <input type="submit" value="Submit" />

</form>


Share : facebook icon twitter icon
jquery selectbox : Reload Jquery Selectbox with other drop down values if last option is selected

jquery selectbox : Reload Jquery Selectbox with other drop down values if last option is selected


By : Johnny
Date : March 29 2020, 07:55 AM
Hope that helps How can I refresh jquery multiselect when the last option is selected with new values? Like I have the below options in my selectbox , HTML Part:
code :
<select id="positions">
    <option value="0">Programmer</option>
    <option value="1">Tester</option>
    <option value="2">Manager</option>
    <option value="3">Admin</option>
    <option value="4">Load all other</option>    
</select>

<select id="positions2">
    <option value="0">test1</option>
    <option value="1">test2</option>
    <option value="2">test3</option>
    <option value="3">test4</option>
    <option value="4">Load all other</option>    
</select>
$('#positions').change(function() {
    if ($('#positions').val() == 4) {
        var data = $('#positions2').html();
        $('#positions').html(data );
    }
});
Jquery Validate to check selectbox unqiue and required

Jquery Validate to check selectbox unqiue and required


By : Thiago
Date : March 29 2020, 07:55 AM
may help you . This is a common problem with the jQuery validator. There are two ways around this problem:
Method1:
code :
<form id="insertResult" method="post" action="excelSQL.php" >
    <select id="selectField0" name="select[]" style="float:left" class="error">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>

    <select id="selectField1" name="select[]" style="float:left">
        <option selected="" value="">Select one</option>
        <option value="Email">Email</option>
        <option value="1_Name2">1_Name2</option>
    </select>
    ...
</form>
 $("#insertResult").find("select").each(function() {
     $(this).validate({
         rules: {
             'select[]': {
                 required: true,
                 unique: true
              }
         }
     });
 }); 
    // submit handler for form
    $('#insertResult').submit(function(event) { 

        // if either field is not selected, show error and don't submit
        if( itemNotSelected( $('#selectField0'), $('#selectField1') ) == true )  { 

            $('.error2').css("display","block");
            event.preventDefault(); 
            return false;

        } else if( isEqual($("#selectField0"), $("#selectField1") ) == true ) {

            $('.error2').css("display","none");
            $('.error1').css("display","block");alert("afda")
            event.preventDefault(); 
            return false;

        } 
    });

    // hide error text on focus of element
    $('#selectField0, #selectField1').focus(function() {
        $('.error2, .error1').hide();

    });

// helper methods to check if both fields are equal
function isEqual(elem1, elem2) {
    return (elem1.find("option:selected").html() == 
            elem2.find("option:selected").html());
}

// helper methods to check if one field (or both) is not selected
function itemNotSelected(elem1, elem2) {
    return ( elem1.find("option:selected").html() == "Select one" || 
             elem2.find("option:selected").html() == "Select one" );
}
<select id="selectField0" name="select[]" style="float:left" class="error">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>

<select id="selectField1" name="select[]" style="float:left">
    <option selected="" value="">Select one</option>
    <option value="Email">Email</option>
    <option value="1_Name2">1_Name2</option>
</select>
<span class="error2" style="display:none">These are required fields</span>
<span class="error1" style="display:none">Fields must be unique</span>

<input type="submit" name="submit" value="submit" />
How to disable extra options of 2nd selectbox based on value selected in 1st selectbox using jquery

How to disable extra options of 2nd selectbox based on value selected in 1st selectbox using jquery


By : Viswanath Pullabhotl
Date : March 29 2020, 07:55 AM
Hope that helps You can do something like this using .detach() to remove the options then appending the relevant options afterwards
code :
var $popts = $('#package_type option'); // store all available options
var sel = {
    "default": $popts.eq(0), 
    "PRIVATE OWNER": $popts.slice(1,3), // available values for PRIVATE OWNER
    "TRADER": $popts.slice(1) // available values for TRADER
};

$('#user_type').change(function(){
    // detach all options
    $('#package_type option').detach();
    // if value is '' then append the default - else append the correct options
    $('#package_type').append(this.value == '' ? sel['default'] : sel[this.value]);    
});​
jQuery Validate multiple select required depends on another selectbox

jQuery Validate multiple select required depends on another selectbox


By : Rocky H.
Date : March 29 2020, 07:55 AM
will help you The problem is you have a default option element with value '', which will force the required validation in case of an non multi select, but here since you have multi select the required test is to check whether there is atleast one option is selected not whether an option with non empty value is selected. So since the empty value is selected the validation returns true.
code :
required: function( value, element, param ) {
    // check if dependency is met
    if ( !this.depend(param, element) ) {
        return "dependency-mismatch";
    }
    if ( element.nodeName.toLowerCase() === "select" ) {
        // could be an array for select-multiple or a string, both are fine this way
        var val = $(element).val();
        return val && val.length > 0;
    }
    if ( this.checkable(element) ) {
        return this.getLength(value, element) > 0;
    }
    return $.trim(value).length > 0;
}
<select class="form-control" id="saleState" name="saleState" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
</select>
        saleState: {
            required: function (element) {
                return $("#role").val() == 2
            },
            pattern: {
                param: /.+/,
                depend: function (element) {
                    return $("#role").val() == 2
                }
            }
        }
Make checkboxes required after a value of a selectbox has been chosen (jquery-validate)

Make checkboxes required after a value of a selectbox has been chosen (jquery-validate)


By : yahya nachar
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Use This it will add required attribute in every input checkbox on select dropdown value --
code :
<script type="text/javascript">
    $(document).ready(function(){
        $('#dropdown').change(function(){
        $('input:checkbox').attr("required", "true");
        });
    });
</script>
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org