仅当所有字段均已填写时，如何在按“ Enter”键时接受值？

Question

So I have this code in place that accepts 2 fields "userNAme" and "yourMessage". The "Send" button only activates if both the fields are filled up.

 $("input[type='text'],textarea").keyup(function() { var text = ($(this).val()).toString(); text = text.replace(/\\s+/g, " ").trim(); var message = ($("textarea").val()).toString(); message = message.replace(/\\s+/g, " ").trim(); if (text != "" && message != "") { $('input[type="button"]').removeAttr('disabled'); } else { $("#send").attr('disabled', 'disabled'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Hello!</h1> <form action="" method="post" id="subscribe" name="subscribe"> First name: <input type="text" name="fname" id="fname" placeholder="Name" autofocus><br> <div id="message"></div> Your Message:<br> <textarea typeof="text" id="yourMessage" placeholder="Start Typing..."></textarea><br /> <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" /> </form> <input type="button" class="button button-blue" value="Click Me!" id="click-me" /> <div id="message"></div> 

But now I want to add the functionality of Entering the values on key press of "Enter". I want this to work like the "Send" button, ie only work if all fields are filled up. How to go about this?

Answer 1

If you add the required attribute into your input tag when you click on Submit or hit the Enter key, all fields must be already completed in order to be submited.

For example:

<input type="text" name="fname" id="fname" placeholder="Name" required autofocus>

Answer 2

if you were to use a button with type submit the form will not be submitted by pressing enter as long as that button is disabled, like below

 $("input[type='text'],textarea").keyup(function() { var text = ($(this).val()).toString(); text = text.replace(/\\s+/g, " ").trim(); var message = ($("textarea").val()).toString(); message = message.replace(/\\s+/g, " ").trim(); if (text != "" && message != "") { $('button[type="submit"]').removeAttr('disabled'); } else { $("#send").attr('disabled', 'disabled'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Hello!</h1> <form action="" method="post" id="subscribe" name="subscribe"> First name: <input type="text" name="fname" id="fname" placeholder="Name" autofocus><br> <div id="message"></div> Your Message:<br> <textarea typeof="text" id="yourMessage" placeholder="Start Typing..."></textarea><br /> <button type="submit" class="button button-blue" name="button" disabled="disabled" id="send">Send</button> </form> <input type="button" class="button button-blue" value="Click Me!" id="click-me" /> <div id="message"></div>