Trying to prevent form submission when validating data via API

API & Customization
1

I'm trying to validate whether an object field is already populated prior to form submission and if so do not submit the form. The alert works fine however the form is still submitted. Any help on what I'm doing wrong would be appreciated.


$(document).on('knack-view-render.view_60', function(event, view, record) {
$("#view_60 .kn-button").on("click", function() {

var app_id = Knack.app.id;
var app_key = 'xxxx';
var headers = {"X-Knack-REST-API-Key": app_key,
"X-Knack-Application-ID": app_id,
"Content-Type":"application/json"}
$.ajax({
url: 'https://api.knack.com/v1/objects/object_35/records/' + record.id,
type: 'GET',
headers: headers,
success: function (data) {
console.log(data);
if (data.field_34_raw !== null) {
alert ("This job has already been accepted.");
return false;
}
}
});

});
});

2

No worries - keen to hear how you go.

3

Thanks Brad. It looks like that 2nd option might work.

4

Thanks Dee Jay - that makes sense.

2 options I think:

A form rule that redirects if the job has already been accepted (despite all your previous validations). A message on that form 'Sorry, someone else has already accepted...'. I'm just not sure if the data used after submission that controls the form rules will have been updated so this might need testing.

Spoofing the submit button - We do this a bit using JS to add a faux submit button, and hide the real one (JS or CSS - CSS is faster). Do all your ajax calls from the faux button click and when ready call the real submit.click() function to let Knack do the work there.

Something like:

//Hide form submit
$('#view_XX > form').hide();

//Add faux button
var faux_btn = "<button id='faux_btn' class='kn-button is-primary'>Submit</button>";
$('#view_xx').append(faux_btn);

//Faux_btn click
$('#faux_btn').click(function() {
    //Validation code here...

    //When successful call
    $('#faux_btn').hide();
    $('#view_XX > form').show();
    $('#view_XX > form > button.is-primary').click();   // Done here.
});
Total air code cherry picked so needs testing and probably further UI inputs.
5

Brad,

Thanks for replying. The problem that I'm having is that I may have multiple people on the "Accept Job" page at the same time. Because of this, they could all end up accepting the job. I've implemented a page rule check and I'm also doing a javascript refresh which will definitely help prevent multiple people accepting the same job, but what would really prevent this would be having the capability to check the object to see if the job was accepted and then prevent the form from being submitted. Here's my current process.

  1. User visits the job listings page which has a table of all available jobs.
  2. User clicks "Accept Job" link which takes them to another page which requires them to "Confirm" job acceptance by clicking on a button. On this page I have a page rule checking for previous acceptance of this job and then displaying a error message and removing the "Confirmation" button.
  3. Even though I have this rule there will be no error until someone accepts the job so multiple people could land on this page.
  4. I also have a javascript refresh running on this page just in case someone accepts the job and the other person does not within 10 seconds. If they don't the page refreshes and page rule sees that someone has accepted the job thus displaying the error message and removing the button.

This will work for now but the best solution would be to check the object prior to submitting the form. If there is a way that you know of or a better solution for this, I would appreciate it.

Thanks

6

Hi Dee Jay,

There's a few ways to achieve this and my first thought is to do it without code setting a field in the Jobs object somewhere else that indicates the Job has been accepted and then changing how this form is accessed.

The code way - ajax is asynchronous, so it's been initiated and form is submitted before your ajax call completes. Try including field_34 in the form data somewhere to access it immediately in code, and you might need to add a details view and read the data from that.

Brad