{"error": "Please use POST request"}

{"error": "Please use POST request"}
0

#1

I’m trying to Output something like this.

Here is my Code.

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <form id="checkout" >
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" class="form-control" id="username" value="Bob" required>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" value="Password" required>
        </div>
        <button type="submit" id="checkoutSubmit" class="btn btn-submits btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>
<hr>

JS file
var jsonData = {
  "status": -1,
  "message": "Form validation errors",
  "formErrors": {
    "username": [{
      "noNumber": "'Bob' must contain at least one number (0-9)"
    }, {
      "noSymbol": "'Bob' must contain at least one symbol ([email protected]#$%^&*)"
    }],
    "password": [{
      "noAlpha": "Must contain at least one letter (a-z A-Z)"
    }]
  }
};

$.ajax({
  method: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data: {
    json: JSON.stringify(jsonData)
  },
  success: function(data) {
   
  }
});

I keep getting this error

{“error”: “Please use POST request”}

I don’t see an issue of whats going on


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Can we assume the $.ajax code is enclosed in script tags or is in an externally referenced file?

Also, is this $.ajax code a part of a function which is called when the form is submitted? Can you post all the code?

Also, what does the code for the following url look like?

/echo/json/

#3

The AJax code is in another file


#4

See my other questions.


#5

Also, what does the code for the following url look like?

/echo/json/

Can you put your code in Codepen or jsfiddle or do you have a link to your project online somewhere? I feel I am not seeing all your project’s code.


#6

The issue is that your submit button is firing off a submit event which the form is handling in the default way. The error message is complaining that your form is trying to send form data in a GET request. Since you’re doing client side validation, you’ll need to solve this by attaching a click handler to your submit button and preventing the default action.

$('#checkoutSubmit').click(function(event) {
    event.preventDefault();
});

#7

I’ve attached the click handler and the error is gone. However, it won’t display the form validation error


#8

You don’t have any code that does validation yet. When you do, you can run it in your click handler after preventDefault. If all you want to do is run that $.ajax function, put it in your click handler.