Is there a way I can validate my radio input based on values for female and male? This is what my code looks like:
<span>Gender:</span>
<input type="radio" name="gender" id="male" />Male
<input type="radio" name="gender" id="female" />Female
<div id="e4" class="error2">Please choose your gender</div>
To verify if an item has been selected, you can utilize the :checked selector along with the length property:
if (!$('input[name="gender"]:checked').length) {
$('#e4').show(); // show the error div
}
$(':radio').change(function() {
if ($(this).is(':checked')) {
$('#e4').hide()
} else {
$('#e4').show()
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Gender:</span>
<input type="radio" name="gender" id="male" value="Male" />Male
<input type="radio" name="gender" id="female" value="Female" />Female
<div id="e4" class="error2">Please choose your gender</div>Consider using this approach
Check out the JSFiddle
function validate(){
var value = $('input[name="gender"]:checked').val();
if(!value){
$("#e4").fadeIn()
}
}
$("input[name='gender']").on("change", function(){
$("#e4").fadeOut()
}).error2{
color:red;
}
.hide{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span>Gender:</span>
<input type="radio" name="gender" id="male" />Male
<input type="radio" name="gender" id="female" />Female
<div id="e4" class="error2 hide">Please choose your gender</div><br/>
<button onclick="validate()">Validate</button>In my Next.js project, I am encountering an issue with the background image not displaying on longer pages when viewed on a Google Pixel 3a device. Here is how it looks on shorter pages that do not exceed the viewport height: https://i.sstatic.net/jJBTy.pn ...
Here is the API route for retrieving specific information: /Token?l=Spanish&n=NameofTheServer&m0=Email&m1=&m2=&m3=&m4=&m5=&m6=&m7=&m8=&m9=&m10=&m11=&m12=&m13=&m14=&m15=&m16=&m ...
My unit tests are set up using Karma and Mocha. The reason I use Karma is because some of the functionality being tested requires a web browser, even if it's just a fake headless one. However, most of my code can be run in either a browser or Node.js. ...
The Issue: Currently, I am working on testing React components using Jest and Enzyme. In order to check for properties in development, I have incorporated the prop-types module. The prop-types module relies on console.error to alert when mandatory props a ...
Here is my JSFiddle with an SVG positioned to the left of some text inside a button. I am looking for a way to align the SVG vertically with the text within the button. I've considered a couple of methods: Trying to adjust the line-height, but that ...
As a novice in React.js, I am facing an issue where setState is not functioning properly when submitting a form. Any suggestions on how to resolve this problem? > class Home extends Component{ constructor(props){ > super(props) > ...
As a beginner in NuxtJS and front-end development, I may be overlooking something, but I have tried all available options before reaching out for help. If I missed something, I apologize. I've encountered difficulties when using installed modules tha ...
Currently, I am developing a web application using AngularJs. One issue that I am facing is related to filtered data. After applying specific parameters through checkboxes and radio buttons to filter the data, I navigate to another state. However, when th ...
I've tried everything, but it's still not working. Can anyone help me out? Here are some photos. BEFORE AFTER When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would great ...
I have incorporated a unique font for the Hebrew language on my website, but I am encountering an issue with missing English characters from a-b, A-Z. Currently, I have applied the font (reformaregular) to the body tag: body { font-family: 'reformar ...
I've been working on fetching JSON values from local storage and decoding them, but I'm running into some issues. Here is the code snippet I am using to retrieve the JSON from local storage: $items = "<script> document.write(JSON.parse(JS ...
Currently diving into Angularjs and encountering a slight roadblock in fetching data from a PHP file. <head> <script> var application = angular.module("new",[]); application.controller("control",function($scope,$http){ $http.ge ...
Just starting out in the world of programming, I decided to dive into a Programming Foundations class on Lynda.com. However, after following along for fifteen minutes, I encountered an issue - I couldn't seem to connect my JavaScript file to my HTML f ...
When using jQuery, I am looking to include more codes within the .html() function. However, I also want to incorporate PHP codes, which can make the writing style quite complex and difficult to read. Is it possible to load an external PHP/HTML script? fu ...
I am encountering difficulties with ensuring that all prepend add-ons have the same width. The issue arises when using Font Awesome icons, as each prepend is sized according to its specific icon. I came across a similar thread from approximately one year a ...
.checkbox__container { display: flex; flex-direction: row; align-items: center; padding: 0px; gap: 8px; & input[type="checkbox"] { box-sizing: border-box; width: 20px; height: 20px; accent-color: red; backgr ...
I'm facing an issue with aligning two React components horizontally next to each other. I've been using Material-UI's Grid for alignment, but the components InputVariables and Chart are currently stacking on top of each other in two rows ins ...
I am currently working on a PHP page that involves variables and radio buttons. When a user clicks on a radio button, it triggers a JavaScript function to calculate the price of the selected item by passing some variables. Here's how I have implemente ...
My carousel contains some items, but I'm encountering an error when trying to use mycarousel.getActiveCarouselItemIndex() in my controller. The app is showing an Uncaught ReferenceError: mycarousel is not defined. I would appreciate any help as I am ...
Here's the scenario I'm dealing with. The current URL appears as follows: /categories/Art Using name = location.pathname.split('/')[2], I extract the Art part of the URL. Then, I send an AJAX request to the controller with the followi ...