Generate an error upon submission if a particular checkbox is chosen from a group of checkboxes

Question

Generate an error upon submission if a particular checkbox is chosen from a group of checkboxes

To prevent form submission and display an error message if checkbox id="check1" is selected, follow the code below:

<form name="form1" method="post" action="">
    <span id="group">
        <input type="checkbox" name="check1" id="check1" value="1">
        <label>check1</label> <br>
        <input type="checkbox" name="check2" id="check2" value="2">
        <label>check2</label> <br>
        <input type="checkbox" name="check3" id="check3" value="3">
        <label>check3</label> <br>
        <input type="checkbox" name="check4" id="check4" value="4">
        <label>check4</label> <br>

        <span id="error-message" class="error" style="display: none;">One or more of your selection is wrong.</span>
    </span>
    <input name="submit" type="submit" value="submit" onclick="validateForm()">
</form>

javascript

Answer 1

Answer №1

When using jQuery,

Your JavaScript code would look like this:

$('input[name="submit"]').on('click', function(e){
    if( $('input#check1').is(":checked") ){
        e.preventDefault();
        $('span.error').removeClass("hide");
    }   
});

This is the HTML part of it:

<span class="error hide">There seems to be an error in your selection.</span>

Also, here's the CSS for hiding the error message:

   .hide{
       display: none;
   }

If you want to see how this code works, check it out on JSFiddle:

JSFiddle

Answer 2

When using jQuery,

Your JavaScript code would look like this:

$('input[name="submit"]').on('click', function(e){
    if( $('input#check1').is(":checked") ){
        e.preventDefault();
        $('span.error').removeClass("hide");
    }   
});

This is the HTML part of it:

<span class="error hide">There seems to be an error in your selection.</span>

Also, here's the CSS for hiding the error message:

   .hide{
       display: none;
   }

If you want to see how this code works, check it out on JSFiddle:

JSFiddle

Answer 3

Answer №2

To begin, ensure that your submit button is of type 'button' and assign a JavaScript function to its onclick event as demonstrated below:

<input name="submit" type="button" value="Submit" onclick="validateSubmission()">

// JavaScript function
<script type="text/javascript">
    function validateSubmission() {
        var checkboxChecked = document.getElementById('check1').checked;
        if (checkboxChecked) {
            // Display error message using span element
        } else {
            // Submit the form programmatically
            var forms = document.getElementsByName('form1');
            forms[0].submit();
        }
    }
</script>

Answer 4

To begin, ensure that your submit button is of type 'button' and assign a JavaScript function to its onclick event as demonstrated below:

<input name="submit" type="button" value="Submit" onclick="validateSubmission()">

// JavaScript function
<script type="text/javascript">
    function validateSubmission() {
        var checkboxChecked = document.getElementById('check1').checked;
        if (checkboxChecked) {
            // Display error message using span element
        } else {
            // Submit the form programmatically
            var forms = document.getElementsByName('form1');
            forms[0].submit();
        }
    }
</script>

Generate an error upon submission if a particular checkbox is chosen from a group of checkboxes

Answer №1

Answer №2

Similar questions

Extension for Chrome that switches between active and inactive modes

Transferring form data from Jade to Node.js for submission

Index similar to JavaScript-Meadow

The creation of an indexedDB database and the addition of content encountered an error while trying to perform a 'transaction' on the IDBDatabase

Establish a cookie using the PHP session's username

Rectangles in collision: A mathematical analysis

alter information in a javascript document

An error was encountered: "Uncaught SyntaxError: Unable to utilize import statement outside of a module in

trigger opening a bootstrap modal programmatically

Discover additional and subtract options

Is there a way for me to show "No data" when the json response in vue js is empty?

Learn how to utilize the combineLatest/zip operators to only respond to emissions from the second observable while disregarding emissions from the first observable

The content inside an HTML element and covertly deciphered quotations

There is an issue with the functionality of Java code that has been adapted from Javascript logic

What could be causing the fourth tab to not show any data while the first three tabs are functioning as expected?

Ensure the Firebase real-time database in Javascript purges the active session upon tab or browser closure

What could be causing my Angular JS application to malfunction?

Create a continuous scrolling tool similar to Google Reader for iGoogle

Unusual trait of TrackballControls.target within the world of Three.js

altering the directory for bower installations on specific repositories exclusively