Hi all, is there a way to prevent form submission if Field 1 is greater than Field 2?
Unfortunately, you can’t use validation rules referencing another fields value. As you need to check whether the value is higher before the form is submitted, I think this is likely to be a code-based solution, which I am unable to help with. 
Hopefully one of my colleagues will jump in and help.
Hi @Quynh-Tram
Try this which I got from Knacks docs area and slightly modified:
// Replace view_1 and field_1 with your view and field keys
$(document).on('knack-view-render.view_1', function(event, view, data) {
$("#view_1 .kn-submit input[type=submit]").on("click", function() {
// If this value in the form doesn't equal "SpecificValue" then prevent the form from submitting
if ($('#view_1 #field_1').val() > $('#view_1 #field_2').val()") {
alert ("These are not the droids you are looking for.");
return false;
}
})
});
This will work if the 2 fields are number fields if they will not always be numbers in the fields let me know and I can add some protection for that.
Craig
Edit: please ignore this code it’s for
A different version of Knack I’ve updated the code further down the discussion.
2 Likes
I tried this and this did not work for me. Did anyone else try and succeeded?
The code did not work for me, either.
Hi @Monika & @Quynh-Tram
Could you please post the code you tried and a screenshot of the view and the let me know which fields you are trying this on.
Craig
Hi @Craig
Code is similar to what you suggested. I am not sure if something should go before this code.
// Replace view_1 and field_1 with your view and field keys/
$(document).on(‘knack-view-render.view_149’, function(event, view, data) {
$(“#view_149 .kn-submit input[type=submit]”).on(“click”, function() {
/* If this value in the form doesn’t equal “SpecificValue” then prevent the form from submitting */
if ($(‘#view_149 #field1’).val() > $(‘#view_149 #field2’).val()){
alert (“Field1>field2”);
return false;
}
})
});
Hi @Monika
You need to replace field_1 & field_2 with your field ids which you can get from the data tab in the builder.
If it still doesn’t work let me know and I’ll test it my self.
The code is an example of how to handle the failed submit. i.e. alert(). If you want something different to happen if field 1 is greater than field 2 (make the fields on the form red or display a message on the form…)
Let me know and I’ll post here how to do it
Craig
Earlier, I added field name instead of key. I corrected it but it is still not working.
Ok
I’ll look into it and see if I can find the issue. I’ll post it here soon.
Craig
Hi @Monika
I have rewritten the code, All you need to do is change the number 1 for your field (on line 3) and the number 2 for your field o(on line 4). I have added some console logs so you can check in the Chrome Dev Tool’s console to see if you are getting the correct selectors which are the length and values which are the .val().
Can you try this please:
$(document).on('knack-view-render.view_149', function(event, view) {
const viewElement = $(`#${view.key}`);
const field1 = viewElement.find('#kn-input-field_1 input'); // change the 1 to your field number
const field2 = viewElement.find('#kn-input-field_2 input'); // change the 2 to your field number
viewElement.find('button[type=submit').on("click", function() {
console.log('Field 1 len:', field1.length, 'Field 2 len:', field2.length);
console.log('Field 1 val:', field1.val(), 'Field 2 val:', field2.val());
if (field1.val() > field2.val()) {
alert (`Field 1 (${field1.val()}) is greater than field 2 (${field2})`);
return false;
}
})
});
Craig
Hi Craig,
Thank you. It is still not working for me. I changed the view no. on line 1, and the field no. on line 3, and field no. on line 4.
Hi @Quynh-Tram
Can you please post your code so I can look and a screen shot of your console output. If its all good I am quite happy to set up a meeting to figure it out.
Craig