Autocomplete validate hidden field?

select: function (event, ui) {
        $("#tags").val(ui.item.label); // display the selected text
        $("#tags_data").val(ui.item.id); // save selected id to hidden input
    }

How can I validate tags_data hidden input field on form submitting to make sure it’s the same as the one returned from database using $.ajax

Case it’s very easy to edit those hidden fields. I can take care of that with PHP but then I will have to redirect back to submit form page! Is there a way to do it on submit event?

The best practice is to get it working first using the PHP redirect. Only when that is working is it a good idea to then improve the user experience using ajax.

Is it? The user has to open the dev tools and edit the input value using the element inspector or JS console… so if they went to the bother of editing the value of a hidden input field I’d say there’s no real point in validating those fields in the browser any more. Unless you really care about the hackability UX of your site. :-)

To answer your question though, the general approach for custom form validation is listening to the form’s submit event, and preventing the default action if the validation fails… along the lines of

var tagData = []

$.ajax('/tag-data').done(function (response) {
  // ...
  tagData = response.tagData
})

$('#my-form').on('submit', function (event) {
  var currentTag = $('#tag-data').val()

  if (
    currentTag &&
    tagData.indexOf(currentTag) === -1
  ) {
    event.preventDefault()
    // Show error message here
  }
})

Thanks brother I am planing for the worse case I had noticed such attempts before on my chat there someone submitted bunch of SQL injection lines.

You could simply edit the hidden input and input SQL injection command and that will do harm if you miss to process it with PHP before passing to SQL.

P.S. I am terrible with JS PHP more or less.

This is my code how do I incorporate yours?

$(function() {
 

  $('#tags').autocomplete({
	  minLength: 3,

    source: function( request, response ) {

      $.ajax({
    url: 'http://localhost/site/geolocation/',
	type: "POST",
    dataType: "json",
    data: {
        search: request.term
    },
    success: function (data) {
        response( data );
    }
});

    },
	
	select: function (event, ui) {
        $("#tags").val(ui.item.label); // display the selected text
        $("#tags_data").val(ui.item.id); // save selected id to hidden input
    }

  });

  });

In that case client side validation won’t help you much – it improves the UX, not the security. As @Paul_Wilkins said, it’s crucial to get the server side validation right first.

Well your code doesn’t look complete, the response function is missing and the select part as it is is not valid syntax. Basically in the success callback (or response function) you have to assign the response data to a variable in an outer scope so that it’s accessible in the submit handler though.

Could you please fix it please?

I think your right normal user won’t try to hack me will take care of the rest with PHP.

Could you please help me to fix the code you pointed out please I am terrible at js.

Ah sorry, I was misled by the indentation which is a bit over the place… so there’s nothing missing AFAICT. You should be able to integrate my above code into yours like I explained above (only adjust the dummy selectors to mach your markup of course). Just have a try – if it doesn’t work post your attempt and we can help you debugging.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.