Link to home
Start Free TrialLog in
Avatar of crescue
crescue

asked on

bootstrap and php contact form

I am trying to display a message in my bootstrap page IF THERE IS AN ERROR IN THE EMAIL FIELDS
I am using :
      <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
            </div>
      </div>
I am able to execute the email.php form correctly if everything is fine, but if there is an error I am using
header("location:javascript://history.go(-1)");
to go to the previous page with the USER INPUT.  I have tried several examples from the web and tutorials, but NONE of them have worked for me but this one (history)
My problem is that since it is history page, NO MESSAGE IS DISPLAYED
My question is HOW CAN I APPEND INFO TO MY FIELDS IN BOOTSTRAP LIKE THE ALERT PREVIOUSLY POSTED
Tnx
contactus.htm
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Check the following code.
I made a validation RegEx code.When the email is not right then e message appears in a red background color:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Lynns Heavenly Creations</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
body
{
    height: 100%;
    margin: 0;
    /* The image used */
    background-image: url("http://scalpscreen.net/images/fadedrainbow.jpg");
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.alert{
          display: none;
      }


   /* Add a gray background color and some padding to the footer 
    footer {
      background-color: #f2f2f2;
      padding: 25px;
    } */
</style>

</head>
<body>



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
   </button>
    <!--  <a class="navbar-brand" href="#">Lynn's Heavenly Creations  </a> -->
          <a href="#" class="navbar-left"><img src="/images/logo.jpg"></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Outdoor Crafts</a></li>
        <li><a href="#">Indoor Crafts</a></li>
        <li><a href="dehydrated.htm">Dehydrated Organic Products</a></li>
        <li><a href="#">Jalapeno Cowboy Candy</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="contactus">Contact Us</a></li>

      </ul>

    </div>
  </div>
</nav>

<div class="container">
<div class="row">
  <div class="col-sm-12">
<form class="form-horizontal" role="form" method="post" action="correo.php">
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">Name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
		</div>
	</div>
	<div class="form-group">
		<label for="email" class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10 email-div">
			<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
			<?php echo "<p class='text-danger'>$errName</p>";?>
		</div>
	</div>
	<div class="form-group">
		<label for="message" class="col-sm-2 control-label">Message</label>
		<div class="col-sm-10">
			<textarea class="form-control" rows="4" name="message" cols="20"></textarea>
		</div>
	</div>
	<div class="form-group">
		<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-10 col-sm-offset-2">
			<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-10 col-sm-offset-2">
			<! Will be used to display an alert to the user>
		</div>
	</div>
</form>
  </div>
</div>
</div>



<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>
<script>
var alerT=$('<div class="form-group alert">'+
            '<div class="col-sm-10 col-sm-offset-2">'+
                   'Will be used to display an alert to the user-Click to close'+
            '</div>'+
'</div>');
function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
$('#email').on('change',function(){
    debugger;
    var email=$(this).val();
    if(validateEmail(email)){
        $(this).css('borderColor','green');
    }else{
        $('body').append(alerT.css({
            display:'inline-block',
            backgroundColor:'red',           
            opacity:0.5,
            fontWeight:'bold',
            color:'white'
            
        }));      
// or history.go(-1);
    } 
});
 $(alerT).on('click',function(){
      $(this).detach();
  });
</script>
</body>
</html>

Open in new window

header("location:javascript://history.go(-1)");
This is not a good idea.

You have two options with validation
1. You submit the form to your server script - it validates the form and if errors renders the page out again with the fields filled out with the user inputs and any error messages - this was the old way and quite cumbersom

2. You submit your form data via an AJAX call to a server side service. The service validates the data and sends back a list of errors. As you have not left the page all the user inputs are still there - all that is required is to add the errors to their respective form elements.
If the page submit is successful you simply redirect (window.location = ....) to the next page.

Option 2 is much easier to implement and is the current trend in dealing with form data.
Avatar of crescue
crescue

ASKER

Leonidas, tnx for your help but the email was already validated by INPUT TYPE 'Email'. if I clicked the 'Submit' and the email was incorrect, a message from bootsrtap would appear, I wanted to Validate Name (none blank) and the HUMAN answer Correct BEFORE submitting the form
Yes, I like your red message, could it be centered too :-)
But mostly I would like to validate those 3 fields before submitting the form
Tnx
Avatar of crescue

ASKER

Hi, I was able to fix validation with 'Required', and how do I validate the Human answer to be 5 in order to send
Tnx for your help and the right track
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of crescue

ASKER

Tnx for the right path
You are welcome.