Edit CSS if Text Input empty on Submit

Question

This is my HTML form:

<form action="process.php" id="login" method="POST">
<p>Username: <?php echo $form->error("user"); ?></p>
<div>
<input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18" value="<?php echo $form->value("user"); ?>">
</div>
<p>Password: <?php echo $form->error("pass"); ?></p>
<input type="password" name="pass" id="pass" value="<?php echo $form->value("pass"); ?>">
<p>Email:</p>
<?php echo $form->error("email"); ?>
<input type="text" name="email" value="<?php echo $form->value("email"); ?>">
<input type="hidden" name="fav_continent" value="Default">
<input type="hidden" name="fav_colour" value="Default">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Register">
</form>

Here's my custom style for the text input field:

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}

It looks like this in JSFIDDLE: http://jsfiddle.net/qzrtccLx/

If a user submits the form and either one of the text input fields is empty, how do I make the EMPTY text input field's change from border-bottom: 1px solid #9e9e9e; to border-bottom: 1px solid red;?

You write some javascript. You've attempted to write no code. This is easy. — 9Deuce
– 9Deuce, Commented Sep 10, 2015 at 20:15
I mean easy in the sense of easy to look up on Google. Or even on SO — 9Deuce
– 9Deuce, Commented Sep 10, 2015 at 20:17

jaunt · Accepted Answer · 2015-09-10 20:17:31Z

Using the required attribute we can use the :invalid pseudo class. The Snippet won't demonstrate this behaviour with PHP so I have emitted it all.

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}
input[type=text]:invalid {
  border-color:red;
}

<form action="process.php" id="login" method="POST">
<p>Username: </p>
<div>
<input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18" value="" required>
</div>
<p>Password: </p>
<input type="password" name="pass" id="pass" value="">
<p>Email:</p>
<input type="text" name="email" value="">
<input type="hidden" name="fav_continent" value="Default">
<input type="hidden" name="fav_colour" value="Default">
<input type="hidden" name="subjoin" value="1">
<input type="submit" value="Register">
</form>

Dave · Accepted Answer · 2015-09-10 20:23:48Z

Here's a answer in pure JavaScript. I've written an event to check all the inputs when the form is submitted. If there are any values that are empty, then I update the class on the input and prevent the form from submitting.

var form = document.getElementById("login");
login.addEventListener("submit", function(e) {
  var valid = true;
  var inputs = login.querySelectorAll("input");
  [].forEach.call(inputs, function(input) {
    if (input.value === "") {
      valid = false;
      input.classList.add("error");
    }  
  });
  
  if (!valid)
    e.preventDefault();
});

input[type=text], input[type=password], input[type=email] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  transition: all .3s; 
}

input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]) {
 border-bottom: 1px solid #26a69a;
 box-shadow: 0 1px 0 0 #26a69a; 
}

input[type=text].error {
  border-bottom: 1px solid red;
}

<form action="process.php" id="login" method="POST">
  <p>Username: </p>
  <div>
    <input type="text" style="font-size: 13px; color: #7e7e7e;" autocomplete="off" id="user" name="user" maxlength="18" length="18">
  </div>
  <p>Password:</p>
  <input type="password" name="pass" id="pass">
  <p>Email:</p>
  <input type="text" name="email">
  <input type="hidden" name="fav_continent" value="Default">
  <input type="hidden" name="fav_colour" value="Default">
  <input type="hidden" name="subjoin" value="1">
  <input type="submit" value="Register">
</form>

asdf · Accepted Answer · 2015-09-10 20:16:21Z

1

If you're open to using jQuery, you should use jQuery's submit() function to handle the form submit. This function also handles the actual form submission. return true; to submit and return false; to halt submission.

$("#login").submit(function() {
    $(this).find("input[type='text']").each(function() {
        if (!$(this).val()) {
             $(this).css("border-bottom", "1px solid red");
        }
    }
}

edited Sep 10, 2015 at 20:16

answered Sep 10, 2015 at 20:15

asdf

3,0872 gold badges24 silver badges43 bronze badges

3 Comments

Dave Over a year ago

He's not using jQuery.

Iain Proctor Over a year ago

For one reason or another, this isn't working - the border-bottom isn't changing to red..

asdf Over a year ago

@IainProctor Did you include jquery in your header?

Jackson · Accepted Answer · 2015-09-10 20:30:46Z

0

You need to use JS to intercept the form's submission by attaching an event listener.

var form = document.getElementById('login');
form.addEventListener('submit', function(e){
    //Code here
}, false);

Then inside the function, find all the input fields and loop through each one.

var inputs = form.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
    //Check each input value individually
}

Then inside the loop, check if the value of the input is empty. If so, Give it a red border and cancel the form submission.

if(inputs[i].value=='') {
    inputs[i].style.borderBottom = '1px solid red';
    e.preventDefault();
}

Take a look at this updated fiddle

answered Sep 10, 2015 at 20:30

Jackson

3,5382 gold badges21 silver badges29 bronze badges

Comments

Hellon Canella Machado · Accepted Answer · 2015-09-10 20:20:18Z

-1

Use jquery .val() and a submit event handler

For example

$( "form" ).submit(function( event ) {
   if($('input').val() == ''){
        $('input').css('border-bottom:', '1px solid red');
   }
})

answered Sep 10, 2015 at 20:20

Hellon Canella Machado

4566 silver badges17 bronze badges

1 Comment

Hellon Canella Machado Over a year ago

It is a suggestion, not the entire answer.

Collectives™ on Stack Overflow

Edit CSS if Text Input empty on Submit

5 Answers 5

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related