PHP MySQL mandatory field - php

Question

I have this query
$tww_update_sql = "UPDATE `telesales_anc` SET
`Ime` = '".$_POST['Ime'];
and I have a form with submit button as follows:
<form id="contact" method="post" action="ANC_pozivanje_test.php">
<div class="col-md-2 col-sm-12 col-xs-12 form-group">
<small>Ime</small>
<input id="contact_name" type="text" name="Ime" placeholder="Ime" class="form-control" value="<?php echo $values['Ime']?>">
</div>
<div class="form-group">
<div id="contact_submit" class="col-md-9 col-sm-9 col-xs-12">
<button type="submit" class="btn btn-success" value="Save">Save</button>
</div>
</div>
Script that I used for checking in field is populated is as follows:
<script>
$(document).ready(function() {
<!-- Real-time Validation -->
<!--Name can't be blank-->
$('#contact_name').on('input', function() {
var input=$(this);
var is_name=input.val();
if(is_name){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});
<!-- After Form Submitted Validation-->
$("#contact_submit button").click(function(event){
var form_data=$("#contact_name").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#contact_name"+form_data[input]['']);
var valid=element.hasClass("valid");
var error_element=$("span", element.parent());
if (!valid){
error_element.removeClass("error").addClass("error_show");
error_free=false;
}
else{
error_element.removeClass("error_show").addClass("error");
}
}
if (!error_free){
event.preventDefault();
}
else{
alert('Status nije popunjen');
}
});
});
</script>
Problem is when button is submitted (if field is not populated) I got message "Status nije popunjen" but form is submited regard message.
Is it necessary to use script for this?

Answer 1

It seems you check whether error_free is false, in which case you prevent for submission, however, if it is true (so if the field is populated), you only give an alert. Shouldn't event.preventDefault() be inside else?

Answer 2

You should not listen to button.click, but to form.submit.
<!-- After Form Submitted Validation-->
$("#contact").on('submit', function(event) {
The method event.preventDefault() will prevent the form from submitting, and should be in the same block as the alert()
if (!error_free) {
event.preventDefault();
alert('Status nije popunjen');
}

Answer 3

all you want to do is to validate the data on the client side, making sure that a valid name is supplied. i will recreate this here.
You can simply make changes to it. but i believe this solves your need. Also note that you should validate data on the server. dont just rely on client side validation
$update_sql = "UPDATE " . $table_name . " SET Ime = '" . $_POST['txt-name'] . "'";
'use strict';
$(document).ready(function() {
//bind click event on the button
var form = document.forms['frm-contact'];
$('#btn-contact').bind('click', function(event) {
event.preventDefault(); //this will prevent the form from getting submitted, so that we can validate the user name.
var field = form.elements['txt-name'],
name = field.value,
len = name.length,
error = '';
if (len === 0) {
error = 'Enter your name';
}
else if (len < 2) {
error = 'name should not be less than 2 characters';
}
else if (len > 36) {
error = 'name should not exceed 36 characters';
}
else if (/^[^a-z]+/i.test(name)) {
error = 'name must start with letters';
}
else if (!/^['.a-z\- ]+$/i.test(name)) {
error = 'invalid characters found'; // name should contain only alphabets, dash character, space character and dot character only
}
//done validating. show error now or submit the form.
if (error) {
alert(error);
$(field).addClass('error');
}
else {
$(field).removeClass('error');
form.submit();
}
});
});
.error {
background-color: red;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frm-contact" id="frm-contact" method="post" action="example.php">
<div class="form-group">
<label for="txt-name">Name:</label>
<input type="text" name="txt-name" id="txt-name" placeholder="enter your name" value="" />
</div>
<div class="text-center">
<button type="submit" class="btn btn-success" name="btn-contact" id="btn-contact" value="contact us">SEND</button>
</div>
</form>