Modified color for the submit button

JavaScript
1

I have tested past Sitepoint scripts that it should be checked Terms before form is submitted. How to make also SUBMIT button as grey color when form is not complete and when validation is positive it will make it green? As I understand it will be possible to press ENTER and form will be submitted. Example is for an email input and checkbox.

Example from past posts:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Form submission block</title>
</head>

<body>
<script>
var form = document.querySelector('form#MyformID');
form.addEventListener('submit', function (e)
  {
    var someCheckBox = document.querySelector('#read');
    if (!someCheckBox.checked) {
      e.preventDefault();
      document.querySelector('#message').innerHTML = 'You have to read the terms';
    }
  }
);
</script>
<form id="form#MyformID"action="">

<input name="emailinput1" class="" placeholder="" style="" type="email">           

<label for="read">
<p>I have read the terms:</p>
<input id="read" type="checkbox">
</label>

<input type="submit" style="grey">

<div id="message"></div>
</form>
2

The following example uses built-in HTML5 validation by placing required on the checkbox. https://jsfiddle.net/pmw57/mjog1bkj/1/
The only thing that the script does, is to add/remove a class from the submit button, allowing you to style the submit button.

When you attempt to submit without ticking the have-read checkbox, the built-in form validation shows a validation message. Details on form validation are helpful there.

A general rule though is don’t trust anything that comes through from the browser. You cannot guarantee that a submitted form has the checkbox ticked, so use backend server code as your primary validation technique instead, checking what was submitted from the form.

3

Any clue why script does not work in updated browsers Chrome or Quantum but mentioned link works in Fiddle?

<!DOCTYPE HTML>

<html>

<head>
<title>Change color for SUBMIT button</title>
<style type="text/css">
input[type="submit"].isValid {
  color: green;
}
</style>

<script>
var form = document.querySelector('#myformID');
form.addEventListener("change", function (evt) {
  var form = evt.target.form;
  var read = form.elements.read;
  var submit = form.elements.submit;
  if (read.validity.valid) {
    submit.classList.add("isValid");
  } else {
    submit.classList.remove("isValid");
  }
});
</script>
</head>

<body>
<form id="myformID"action="">

<input name="emailinput1" class="" placeholder="" style="" type="email">

<label for="read">
<p><input id="read" type="checkbox" required> I have read <a href="#">the terms</a>:</p>

</label>

<input type="submit" name="submit">
</form>


</body>

</html>
4

Your script is in the head, so when it runs nothing in the body yet exists.

Move the script to where it should be, at the end of the body just before the </body> tag, and it’ll work.

6

Thank you. It works. I have noticed my mistake.
If I place also

 <input name="emailinput1" class="" placeholder="" required style="" type="email">  
<input type="hidden" name="botcotrol" id="botcpntrol" value="Goodbye bot" />

Will this work also as logical operator and request also email to be filled in and not empty?
I have seen many bot abuses and form is submitted using inputs that execute form as submitted.

Can be used this script as additional measure to prevent abuse and input field will not be if email is empty and checkbox is not checked or we missed email input as there can be many inputs as empty string. I have also PHP control regarding empty strings.

I have added bot control and if empty value is detected it will block to send form inputs. I’m not sure if this is working as form is submitted even this measure is implemented.

PHP script as integrated Javascript validation

&& isset($_POST['botcotrol']) && trim($_POST["botcotrol"]) != ""

If I understand bot work as source code reader and input values are filled in using source code which is executed regardless of Javascript validation.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.