logo
down
shadow

Decouple validity of two radio inputs with same name


Decouple validity of two radio inputs with same name

By : Denisi Murataj
Date : November 19 2020, 03:01 PM
seems to work fine When you set a radio button group as required, the requirement is that an option is selected. If you want to verify that a specific option is checked, you will need to use something like var selected = document.querySelectorAll('#Rad1:checked');var isSelected = selected.length > 0 ? true: false;
Notice how as you check the radios in my adjusted snip below, they both change to TRUE:
code :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
</head>

<body>

  <form id="form">
    <input id="rad1" type="radio" name="my radio 3" value="option 1" required>
    <input id="rad2" type="radio" name="my radio 3" value="option 2">
  </form>

  <script>
    function checkValid() {
      console.log('Should be valid form: ' + document.getElementById('form').checkValidity());
      console.log('Rad1 should show false:  ' + document.getElementById('rad1').checkValidity());
      console.log('Rad2 should show true:  ' + document.getElementById('rad2').checkValidity());
    }

    checkValid();
    $('[name="my radio 3"]').on('change', function() {
      checkValid();
    })
  </script>

</body>

</html>


Share : facebook icon twitter icon
How to set a different custom validity for different inputs

How to set a different custom validity for different inputs


By : Justin Brusso
Date : March 29 2020, 07:55 AM
I wish did fix the issue. How about using a selector other than just getting everything by tagName, and then set whatever validity you want
code :
$(document).ready(function () {
    $('#username').on({
        invalid: function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter a name.");
             }
        },
        input: function(e) {
            e.target.setCustomValidity("");
        }
    });

    $('#userlocation').on({
        invalid: function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter a location.");
             }
        },
        input: function(e) {
            e.target.setCustomValidity("");
        }
    });
});
Set validity of multiple inputs from a AngularJS Directive

Set validity of multiple inputs from a AngularJS Directive


By : user3685898
Date : March 29 2020, 07:55 AM
This might help you I would try to approach this problem by implementing helper object to store group elements controllers with methods to add to the group and setValidity of all elements in the group.
Something like this:
code :
angular.module('myModule').directive('groupedInputs', function() {

    var groupControls = {
        groups: {},
        add: function(name, ctrl) {
            this.groups[name] = this.groups[name] || [];
            this.groups[name].push(ctrl);
        },
        setValidity: function(name, key, value) {
            this.groups[name].forEach(function(ctrl) {
                ctrl.$setValidity(key, value);
            });
        }
    };

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, element, attrs, ctrl) {

            // Add element controller to the group
            groupControls.add(attrs.groupedInputs, ctrl);

            element.on('change', function() {

                // When needed, set validity of elements in the group
                groupControls.setValidity(attrs.groupedInputs, 'server', false);
                scope.$apply();

            });
        }
    };
});
Set Validity on other inputs using directives upon button click in AngularJS

Set Validity on other inputs using directives upon button click in AngularJS


By : hapood wang
Date : March 29 2020, 07:55 AM
This might help you Yes, it is possible and you almost got it right. What you wanna do is pass form to isolated scope and then use in directive controller. There is no need to add event manually, as you can use ng-click. Otherwise you would need to use $scope.$apply.
In directives you can use linking function, but you don't have to. In general it is good practice to keep light logic in controller and DOM manipulation in linking function.
code :
var app = angular.module("myApp", []);

app.directive('loginButton', loginButton);

loginButton.$inject = ["$http", "$window"];

function loginButton($http, $window){
  return {
    template: '<button type="button" class="btn btn-primary" ng-click="click()">Take Exam</button>',
    scope: {
      form: '='
    },
    controller: function($scope){
      $scope.click = function(){
        form = $scope.form;
        form.student_code.$setValidity('codeValidity', false);
      };
      
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp">
    <div class="container">
        <div id="login-container">
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
            </div>
            <form name="loginForm" novalidate>
                <div class="form-group">
                    dasdas -- {{ loginForm.student_code.$error }}<br>
                    <input type="text" class="form-control text-center" name="student_code"  ng-model="studentCode" placeholder="Enter Exam Code" required />
                    <span class="errors" id="error-student-code" ng-if="errors">{{ errors }}</span>
                </div>
            </form>
            <login-button form="loginForm"></login-button>
            <a href="#"><button class="btn btn-primary">Register</button></a>
        </div>
    </div>
</div>
How to iterate through a dictionary and check validity of inputs?

How to iterate through a dictionary and check validity of inputs?


By : Mano Siva
Date : March 29 2020, 07:55 AM
it helps some times how can I iterate over a dictionary and check input values for validity during the iterating loop? The problem is described in the code:
code :
for key, value in mydict.items():
    while True:
        try:
            inp = int(input('Your number for: ' + key))
        except:
            inp = 0

        if inp > 0:
                mydict[keu] = inp
                break
        print('enter again')
Display radio inputs on separate lines but keep text on same line as radio selector

Display radio inputs on separate lines but keep text on same line as radio selector


By : Yong Sheng
Date : March 29 2020, 07:55 AM
wish help you to fix your issue To have each input/text combo be on it's own line, just wrap them in a block element. Though your text should also be in a label that is associated with the input - isn't necessary, but is better, more accessible markup, and better UX because it allows you to click on the text to select the input.
code :
#beginButton,
#quiztext {
  text-align: center;
}

#form {
  text-align: left;
  margin-left: 115px;
  margin-right: 115px;
}

#telcoform {}

.quizItem {}

.quizItem input {}

.qNumber {
  font-family: 'merriweatherregular';
  font-weight: 700;
}
<div id="quiz">
  <div id="quiztext">
    <p>Let's get started!</p>
    <p>You will be taking the 10-question Telephone Quiz. All questions are multiple-choice, with one correct answer each. If you pass, you will recieve the Honorary Telephone Award!</p>
  </div>
  <div id="form">
    <form id="telcoform">
      <div class="quizItem">
        <p class="qNumber">1</p>
        <div><input type="radio" name="question1" value="1a" id="q-1a"><label for="q-1a">Option A</label></div>
        <div><input type="radio" name="question1" value="1b" id="q-1b"><label for="q-1b">Option B</label></div>
      </div>
      <div class="quizItem">
        <p class="qNumber">2</p>
        <div><input type="radio" name="question2" value="2a" id="q-2a"><label for="q-2a">Option A</label></div>
        <div><input type="radio" name="question2" value="2b" id="q-2b"><label for="q-2b">Option B</label></div>
          <div><input type="radio" name="question2" value="2c" id="q-2c"><label for="q-2c">Option C</label></div>
      </div>
    </form>
  </div>
</div>
Related Posts Related Posts :
  • Bootstrap DatePicker format mm/yyyy set max month
  • Firebase cloud firestore + auth: write only for signed in users
  • Getting jQuery.data functionality without jQuery
  • How to get incrementing serial numbers for new and removed items for jQuery sortable?
  • Highlighting a word or sentence in iframe, using javascript/Jquery
  • Calculate what percentage of a specific element has been scrolled into view
  • Knockout autocomplete with jquery doesn't allow to select custom value
  • react native - react-native-maps performance slow on iOS
  • ajax fallback when no internet connection
  • Show Textbox based on RadioButton selection or value when Page Loads
  • JS maximum call stack exceeded
  • Resetting object key values
  • How can i disable the toggle, preventing user to tap/click it?
  • How to include javascript file into LOV popups on apex oracle?
  • Javascript Angular 4 eventEmitter with ngClass
  • Webpack - module not found even though module exists
  • How to display following values using vue js?
  • Regexp: Allow only use of a few words and only once per word
  • CCapture.js webm video blacked out
  • Using a HTML hyperlink to call a JS function on the parent element
  • Return undefined from existing property in javascript model
  • What is the Difference Between These two jQuery Code Snippets?
  • How to get Network Speed in WebRTC
  • How to get text from selected value in a dropdownlist which is js based
  • window is not defined angular universal third library
  • Angularjs ng-repeat stylization depending on previous value
  • Trying to implement Fittext.js
  • Calculate number of match in array Lodash
  • Jquery Smooth Scroll Using Offset.top
  • How to extract data to React state from CSV file using Papa Parse?
  • How to add unique links to google maps markers
  • How to use if condition in a tool bar in java script
  • Ajax filter in django not showing in HTML
  • data collection with Javascript
  • Rotate image on lightbox2 load
  • Prevent body from scrolling when a Pop-Up is open
  • How to copy files that do not need to be compiled in Gulp?
  • Array not assigned to variable? How does this work and what exactly is it doing?
  • Sorting associative array of objects in javascript
  • Changing Icon in Sap.m.tree having CustomTreeItem
  • Merge two array of objects based on a key
  • javascript in css not working
  • Passing only clicked element to onClick function - reactjs
  • React boilerplate doesn't load js files in the index.html
  • is Child service inside child component visible in the Parent component?
  • Check if data attribute value equals a string
  • How to get value of child tag of a button tag
  • How to access subjects of selected mails in Apple Mail using JavaScript?
  • How to get all dynamically set inline-style CSS in jQuery?
  • Error: Module "html" does not provide a view engine (Express)
  • Random Image in <Div> from array
  • Slider with touch function
  • ReactJS Component Architecture Problems / Nested Components or Single Component Manager
  • Javascript: Caching within Closure doesn't work
  • HTM5 Canvas Drawing App: How Do I Select The Color?
  • Assigning Events using HTML DOM
  • html5 getUserMedia() portrait mode
  • How to avoid 'headers already sent' within Promise chain?
  • Get a result from a react native app integrated into an existing android app
  • Why does the value of input field return undefined
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org