How do I validate my code in PHP without getting error messages defined in the ajax definition in main.js?
Note: Chrome console returning: XMLHttpRequest cannot load file:///C:/Documents/Mini%20Revision%20Projects/Project%20Website%203/ajax.php. Received an invalid response. Origin 'null' is therefore not allowed access.
Below is my code:
main.html
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="C:\Documents\jQuery\jquery2.js"></script>
</head>
<body>
<ul id="info1">
<li>Put anything in the field below.</li>
</ul>
<form id="form1">
<input type="text" name="field1" id="field1">
<input type="submit" name="submit" id="submit" value="Submit Form">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
$(document).ready(function() {
$("#form1").submit(function( event ) {
event.preventDefault();
//alert("happy");
$.ajax({
type: 'POST',
url: 'ajax.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
console.log(data);
$("#info1").html(data.msg);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
});
});
ajax.php
<?php
class ajaxValidate {
function formValidate() {
//Put form elements into post variables (this is where you would sanitize your data)
$field1 = @$_POST['field1'];
//Establish values that will be returned via ajax
$return = array();
$return['msg'] = '';
$return['error'] = false;
//Begin form validation functionality
if (!isset($field1) || empty($field1)){
$return['error'] = true;
$return['msg'] .= '<li>Error: Field1 is empty.</li>';
}
//Begin form success functionality
if ($return['error'] === false){
$return['msg'] = '<li>Success Message</li>';
}
//Return json encoded results
return json_encode($return);
}
}
$ajaxValidate = new ajaxValidate;
echo $ajaxValidate->formValidate();
?>