如何使用 Laravel 5.5 在 jQuery 中使用 @lang？

Question

I am trying to make a dynamic input field that gives a warning when a value no longer matches the value stored in the DB. I want to use Laravel's Localization @lang('messages.error') or {{ __('messages.error') }} to make this message available for the selected languages for my app.

My question is simple, how do you use this within jQuery? I've found the answer to be hard for my current level of experience, so I wonder if anyone here knows the answer.

Partial code:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<title></title>

<form action="" method="post">

    <div class="ibox float-e-margins">

        <div class="ibox-title">
            <h4>@lang('form.kvk')</h4>
        </div>

        <div class="ibox-content">
            <div class="form-group{{ $errors->has('kvk') ? ' has-error' : '' }}">
                <label for="kvk">@lang('form.kvk')<span class="redFont">*</span></label>
                <input type="text" class="form-control" name="kvk" id="kvk" value="{{ ( $errors->has('kvk') ? old('kvk') : ( $debtor != NULL ? $debtor->kvk : old('kvk') ) ) }}">
            </div>
        </div>

        {{-- Remains empty if no error --}}
        <div id="noMatchKvk"></div>

    </div>

</form>

<script>

/* added after answer
var kvk = '{{ __("add/customer/messages.noMatchKvk") }}';
*/

    $('#kvk').keyup().on('change', function() {
        // If the value is no longer equal to the DB
        if ( $('#kvk').val() != '{{ $debtor->kvk }}' ) {
            $('#noMatchKvk').html('<span class="help-block"><strong>' + kvk + '</strong></span>');
        }
        // If the value remains the same
        if ( $('#kvk').val() == '{{ $debtor->kvk }}' ) {
            $('#noMatchKvk').html('');
        }
    });

</script>

PS. I have searched around, but could not find the answer. However, I might be asking the wrong question.

Thank you in advance! :)

EDIT + Solution

I failed to mention that the messages were in another folder within the en directory . The reason it failed was because I kept mentioning the route with dots (.), when I should've done slashes (/). I have edited my question.

Guess this was a rookie mistake, thank you to everyone who replied! And thank you @Theodoros Alexopoulos for your answer

Answer 1

<script type="text/javascript">

    var something = @json( __('file.variable') );

</script>

The script should be inside your blade

Then use the variable as you like

Answer 2

In laravel 8, You can use @lang without any bracket like this

<script type="text/javascript">

    var message = "@lang('file.variable')";

</script>

Answer 3

Use this inside scripts tags NOT inside .js file then you can you the variable inside the script tags or in .js

 <script>
 var v1 = '{{ @lang('file.value') }}';

$('#kvk').keyup().on('change', function() {
    // If the value is no longer equal to the DB
    if ( $('#kvk').val() != '{{ $debtor->kvk }}' ) {
        $('#noMatchKvk').html('<span class="help-block"><strong>' + v1 + '</strong></span>');
    }
    // If the value remains the same
    if ( $('#kvk').val() == '{{ $debtor->kvk }}' ) {
        $('#noMatchKvk').html('');
    }
});

Answer 4

I think you have to keep the @lang , or {{ }} call inside the JS single quotes:

$('#noMatchKvk').html('<span class="help-block"><strong>{{ __("messages.noMatchKvk") }}</strong></span>');

That, or you can set the value of {{ __("messages.noMatchKvk") }} to a variable and use it directly in your code:

var message = "{{ __('messages.noMatchKvK') }}";

$('#noMatchKvk').html('<span class="help-block"><strong>' + message + '</strong></span>');

The second method makes it a little more readable. Also, make sure this <script> is within a .blade.php file (which it looks like it is, but just something to be aware of; you can't use blade directives like @ or {{ }} in a straight .js file)