AngularJS empty form validation bugs out

Question

I have this form where the input by the user need to be passed from the form, to the controller and then published inside the PHP database.

When I click submit, and the inputs are empty, the false statement works, however if i type inside the inputs and then empty them manually, the data is still inserted, even though it is null (returns true).

HTML Code:

<div id="container">    
    <section ng-controller="mapController">
            <h1> Contact Us</h1>                
            <br>
            <h2> If you wish to contact us about prices and information, kindly fill in the form below. </h2>
            <br>
            <form class="form-group" id="customForms" ng-controller="getContactsCtrl">
                    <label> E-mail </label> 
                    <input id="customFormsInput" class="form-control" ng-model="contact.email" type="email" placeholder="E-mail goes here" required/>
                    <br> 
                    <label> Mobile Number </label>
                    <input id="customFormsInput" class="form-control" ng-model="contact.mobile" type="number" placeholder="Your number goes here" required/>
                    <br> 
                    <label> How may we be of service? </label>
                    <br>
                    <textarea rows="4" cols="100" ng-model="contact.text" type="text" placeholder="Insert text here" required>
                    <!-- User text -->
                    </textarea>
                    <br><br>
                    <button class="btn btn-primary" ng-click="newContact(contact)"> Submit </button>
                    <br> <br><p> {{queryMsg}} </p>
                </form> 
            <h2> You can also visit us at our premises at Smart City, Xghajra. </h2>
            <br>
            <div id="googleMap" style="width:500px;height:380px;"></div>
            <br><br>
    </section>  
</div>

AngularJS controller:

    app.controller('getContactsCtrl', ['$scope', '$http', function($scope, $http)   
{
    $scope.newContact = function(contact) {
        console.log(contact);
        $scope.queryMsg= ""; //displays if sent or not in html form
        //post is used to create
        $http.post('model/addContact.php', contact).success(function(data) {
                if (data && contact != null) 
                {//row inserted
                  $scope.queryMsg = "Query has been sent successfully.";
                  console.log("Query received in DB");
                  $scope.contact=""; //clear text again after submit is pressed
                }
                else
                {
                  $scope.queryMsg = "We were unable to fetch your query at this time.";
                  console.log("Query not received");
                }
            })
        };
    }
]);

PHP Code:

    <?php
    $data = json_decode(file_get_contents("php://input"));

    $email = $data->email;
    $mobile = $data->mobile;
    $text = $data->text;

    require_once("connection.php");

    $connection = connectToMySQL();
    $query = "INSERT INTO tbl_contactus (email, mobile, text) VALUES ('$email', '$mobile', '$text')";
    $result = mysqli_query($connection, $query)
         or die("Error in query: ". mysqli_error($connection));

    if(mysqli_affected_rows($connection) > 0){
            $success = true;
    }else{
            $success = false;
    }

    echo json_encode($success);
?>

Your present code is open to [**SQL injection**](http://stackoverflow.com/q/60174/). Use [**`mysqli_*` with prepared statements**](http://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php), or [**PDO**](http://php.net/pdo) with [**prepared statements**](http://php.net/pdo.prepared-statements). — Funk Forty Niner, Dec 19 '15 at 18:12

score 0 · Answer 1 · edited Dec 19 '15 at 18:12

Try by applying below changes:

Add name="customForms" for your form and change your form submit button as below :

<form class="form-group" name="customForms" id="customForms" ng-controller="getContactsCtrl">    
<button class="btn btn-primary" ng-click="newContact(customForms)"> Submit </button>

Change your controller as below :

app.controller('getContactsCtrl', ['$scope', '$http', function ($scope, $http){
$scope.contact = {};
$scope.newContact = function (form) {
    if (form.$invalid)
        return false;
    console.log(contact);
    $scope.queryMsg = ""; //displays if sent or not in html form
    //post is used to create
    $http.post('model/addContact.php', contact).success(function (data) {
        if (data && contact != null) {
            //row inserted
            $scope.queryMsg = "Query has been sent successfully.";
            console.log("Query received in DB");
            $scope.contact = ""; //clear text again after submit is pressed
        } else {
            $scope.queryMsg = "We were unable to fetch your query at this time.";
            console.log("Query not received");
        }
    });
  };
}]);

score 0 · Answer 2 · answered Dec 19 '15 at 12:44

i 've made you code live on jsfiddle and i checked it, to me it works ok, i tried to fill the edits and delete them manually and it did not posted the form.

the only mistake that i found is that you use another controller than the one you create. on HTML you use the controller <section ng-controller="mapController"> while you use the getContactsCtrl controller.

anyway, please take a look here : http://jsfiddle.net/tornado1979/makfjz9L/

AngularJS empty form validation bugs out

2 Answers2