Cannot Update Data in MySql (error: ER_PARSE_ERROR)

I’m trying to make the “Edit Profile” page so a user can edit his/her profile info. But I screwed up somewhere and It is not working. I am assuming that I did a mistake in the query part.

My controller (API):

export const editUser = (req, res) => {
  const q = "SELECT * FROM users WHERE id = ?";
  const userId = req.params.userId;

  db.query(q, [userId], (err, data) => {
    if (err) return res.status(409).json(err);

    const q = "UPDATE users SET (`name`, `surname`, `headline`) VALUES (?)";
    const values = [req.body.name, req.body.surname, req.body.headline];

    db.query(q, [values], (err, data) => {
      if (err) return res.status(500).json(err);
      return res.status(200).json("User has been updated.");
    });
  });
};

My route (API):

const router = express.Router();
router.post("/edit-profile/:userId", editUser);

export default router

My client site code:

  const [err, setErr] = useState(null);
  const [inputs, setInputs] = useState({ name: "", surname: "", headline: "" });

  const handleChange = (e) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    console.log(inputs);
  };

  const handleClick = async (e) => {
    e.preventDefault();

    try {
      await axios.post("http://localhost:8800/api/users/edit-profile/" + userId, inputs);
    } catch (err) {
      setErr(err.response.data);
    }
  };

HTML:

          <form action="a">
            <div>
              <p>Name:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.name}
                name="name"
                onChange={handleChange}
              />
            </div>
            <div>
              <p>Surname:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.surname}
                name="surename"
                onChange={handleChange}
              />
            </div>
            <div>
              <p>Headline:</p>
              <input
                type="text"
                placeholder={error ? "Something Went wrong" : isLoading ? "Loading" : data.headline}
                name="headline"
                onChange={handleChange}
              />
            </div>
          </form>

To make it simpler I tried to POST in Insomnia :

{
    "name": "asd",
    "surname": "asd", 
    "headline": "asd"
}
 

But I am getting an error:

{
    "code": "ER_PARSE_ERROR",
    "errno": 1064,
    "sqlMessage": "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '(`name`, `surname`, `headline`) VALUES ('asd', 'asd', 'asd')' at line 1",
    "sqlState": "42000",
    "index": 0,
    "sql": "UPDATE users SET (`name`, `surname`, `headline`) VALUES ('asd', 'asd', 'asd')"
}

I want to edit the user name, surname, and headline of a user.

How to fix $injector:unpr Unknown Provider in AngularJS

I have an AngularJS application with ASP.NET. When I publish the application, and host in on local IIS, I get this error.
In Web.config, in compilation tag when I set debug=”true” the application works as expected, otherwise, I get this issue, so I assume that this is minification problem.
I did my research, it turned out that strict dependency injection should be used (and it is).
Now, I have no more ideas how to approach this problem.
Here is a section of code that error points out.

var betApp = angular.module("betApp", [
    "ngRoute",
    "PubSub",
    "ngMap",
    "ngSanitize",
    "angularFileUpload",
    "angular-md5"
])

The controller:

betApp.controller("MainCtrl", MainCtrl);

MainCtrl.$inject = ["$scope", "$route", "PubSub", "$location", "$rootScope", "$timeout", "$http", "configuration", "StaticService"];

function MainCtrl($scope, $route, pubSub, $location, $rootScope, $timeout, $http, configuration, StaticService) {
   //controller logic
}

The service:

betApp.factory("StaticService", StaticService);

function StaticService() {
    // service logic
    return{
        flag: true
    }
}

And the error itself: Unknown provider: StaticServiceProvider <- StaticService <- MainCtrl

new Image() w/ srcset: Do Browsers respect responsive images?

I am seeking information regarding the handling of srcset by various browsers when implemented through JavaScript, specifically using new Image().srcset. My primary interest lies in understanding whether browsers effectively download only the necessary image files based on the specified criteria.

Here is a code example for reference:

let img = new Image();
img.srcset = "image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w";
img.sizes = "(max-width: 320px) 280px, (max-width: 480px) 440px, 800px";
img.src = "image-800w.jpg"; // Fallback source

Context: My objective is to preload images without attaching them to the current DOM, while ensuring that srcset functionality and responsive loading based on viewport size are appropriately respected.
I would greatly appreciate any insights or resources regarding browser support and behavior in this context.

Javascript fetching code instead of name within Django

This is a javascript that I have found in github, this is the link for it.

The problem is that when I used the ph-address-selector.js, it works but instead of fetching the “display name”, it fetches the “code ids”, which is the true value of the input when I ask ChatGPT about it. Also you can see the same issue from some user.

So I tried the modified javascript code so that it will use the same URL I used to connect it to my base.html, which extends all of my scripts to all of my html templates.

ph-address-selector.js

var my_handlers = {
    // fill province
    fill_provinces: function() {
        var region_code = $(this).val();
        var region_text = $(this).find("option:selected").text();
        $('#region-text').val(region_text);
        $('#province-text').val('');
        $('#city-text').val('');
        $('#barangay-text').val('');

        let dropdown = $('#province');
        dropdown.empty().append('<option selected="true" disabled>Choose State/Province</option>');

        let city = $('#city');
        city.empty().append('<option selected="true" disabled></option>');

        let barangay = $('#barangay');
        barangay.empty().append('<option selected="true" disabled></option>');

        $.getJSON(provinceUrl, function(data) {
            var result = data.filter(value => value.region_code == region_code);
            result.sort((a, b) => a.province_name.localeCompare(b.province_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.province_code).text(entry.province_name));
            });
        });
    },
    // fill city
    fill_cities: function() {
        var province_code = $(this).val();
        var province_text = $(this).find("option:selected").text();
        $('#province-text').val(province_text);
        $('#city-text').val('');
        $('#barangay-text').val('');

        let dropdown = $('#city');
        dropdown.empty().append('<option selected="true" disabled>Choose city/municipality</option>');

        let barangay = $('#barangay');
        barangay.empty().append('<option selected="true" disabled></option>');

        $.getJSON(cityUrl, function(data) {
            var result = data.filter(value => value.province_code == province_code);
            result.sort((a, b) => a.city_name.localeCompare(b.city_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.city_code).text(entry.city_name));
            });
        });
    },
    // fill barangay
    fill_barangays: function() {
        var city_code = $(this).val();
        var city_text = $(this).find("option:selected").text();
        $('#city-text').val(city_text);
        $('#barangay-text').val('');

        let dropdown = $('#barangay');
        dropdown.empty().append('<option selected="true" disabled>Choose barangay</option>');

        $.getJSON(barangayUrl, function(data) {
            var result = data.filter(value => value.city_code == city_code);
            result.sort((a, b) => a.brgy_name.localeCompare(b.brgy_name));
            $.each(result, function(key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.brgy_code).text(entry.brgy_name));
            });
        });
    },

    onchange_barangay: function() {
        var barangay_text = $(this).find("option:selected").text();
        $('#barangay-text').val(barangay_text);
    },
};

$(function() {
    $('#region').on('change', my_handlers.fill_provinces);
    $('#province').on('change', my_handlers.fill_cities);
    $('#city').on('change', my_handlers.fill_barangays);
    $('#barangay').on('change', my_handlers.onchange_barangay);

    let dropdown = $('#region');
    dropdown.empty().append('<option selected="true" disabled>Choose Region</option>');
    $.getJSON(regionUrl, function(data) {
        $.each(data, function(key, entry) {
            dropdown.append($('<option></option>').attr('value', entry.region_code).text(entry.region_name));
        });
    });
});

base.html

<script>
  var provinceUrl = "{% static 'ph-json/province.json' %}";
  var cityUrl = "{% static 'ph-json/city.json' %}";
  var barangayUrl = "{% static 'ph-json/barangay.json' %}";
  var regionUrl = "{% static 'ph-json/region.json' %}";
</script>
<script src="{% static 'ph-json/ph-address-selector.js' %}"></script>

This is the value that I got when I checked the database

How to add images in the embed code feature on Webflow?

I am trying to add a carousel to my website on webflow and I have used to embed code feature. I have added the HTML, CSS and JavaScript all together because I’m not sure how to do that on seperate files in Webflow. I have also added 3 images to the carousel but when i publish the website and view it, the functionality of the carousel works but does not show the images. I have put down the path as: images/image1.jpg as that is what is used for other images. I have put down the path as: /images/image1.jpg as that is what is used for other images.

<head>
    <meta charset="UTF-8">
    <title>Simple Image Carousel</title>
    <style>
        .carousel {
            position: relative;
            width: 600px;
            margin: auto;
            overflow: hidden;
            border: 1px solid #ddd;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;
        }

        .carousel-item img {
            width: 100%;
            display: block;
        }

        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            border: none;
            color: white;
            font-size: 2em;
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
        }

        .carousel-control.prev {
            left: 10px;
        }

        .carousel-control.next {
            right: 10px;
        }
    </style>
</head>
<body>

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="/images/image1.jpg" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="/images/image2.jpg" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="/images/image3.jpg" alt="Slide 3">
        </div>
    </div>
    <button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    let currentIndex = 0;
    const items = document.querySelectorAll('.carousel-item');
    const totalItems = items.length;

    function updateCarousel() {
        items.forEach((item, index) => {
            item.classList.remove('active');
            if (index === currentIndex) {
                item.classList.add('active');
            }
        });
        const carouselInner = document.querySelector('.carousel-inner');
        carouselInner.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % totalItems;
        updateCarousel();
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + totalItems) % totalItems;
        updateCarousel();
    }
</script>
</body>

How to Differentiate Wrong Password for Unverified User in AWS Cognito SignIn?

Problem:

I’m working with AWS Cognito and implementing user authentication in my react-native app using the aws-amplify library(Gen2 api, version:6.6.0). My flow includes user registration and sign-in using an email and password. Here’s the scenario I’m struggling with:

  1. Sign Up Flow:
  • User signs up with an email and password.
  • Cognito sends a confirmation code to the user’s email for verification (CONFIRM_SIGN_UP).
  • The user closes the app without completing the confirmation process.
  1. Sign In Flow:
  • The user comes back, tries to sign in using the same email and password without confirming their account.
  • If the user tries to sign up again, I get the “User already exists” error, which is expected.
  • Then, they proceed to sign in. If the password is correct, I get nextStep value as ‘CONFIRM_SIGN_UP’, which tells the user to complete the sign-up process by verifying their email.
  • However, if the password is wrong, I get the same nextStep: ‘CONFIRM_SIGN_UP’ instead of any error about the password being incorrect.

The Issue:

When a user signs in and hasn’t verified their email, Cognito returns nextStep: ‘CONFIRM_SIGN_UP’ regardless of whether the password is correct or not.
It should give ‘invlaid credentials’ error, if password for used for signIn is different from the one used during signUp, even if user has not verified previously.

How do I differentiate between a wrong password and an unverified account when the user hasn’t completed the verification?

PS: Please note that, I am facing this issue in Gen2 APIs, I have checked it with previous version 5.2.5, there it worked, but not with 6.6.0

My Current Code:

export async function signInCognito({
  email,
  password,
  onError = () => {},
  onSuccess = () => {},
}: SignInCognitoParams) {
  try {
    const { isSignedIn, nextStep, ...rest } = await signIn({
      username: email,
      password,
    });
    console.log(isSignedIn, nextStep, email, password, rest);

    if (isSignedIn) {
      await saveAuthTokenAndEmail(email);
      onSuccess({ isSignedIn, nextStep });
    }
    
    return isSignedIn;
  } catch (error) {
    onError(error as object);
    return false;
  }
}

Erase selected selection within editablecontent div with highlightjs

I am using the library highlight.js with editablecontent in order to create a mini-code editor. I know that highlightjs and editable content is not suitable for a code editor, but I do it because I need to render multiple code blocks and non-code text like an input, and using Monaco for example multiple times in the same page is not efficient performance-wise.

I managed to get the highlighting to work, deleting characters to work and fix cursor position, however, when I select an area in the code block and press the delete button, it will only delete one character.

I’ve created a stackblitz version here

You can see in the example that I added some code in the code-block.

When I use window.getSelection() after I selected this line:

templateUrl: './basic-session.component.html' it actually only shows me this text from the selection value: './basic-session.component.html' and ignores the highlighted text (templateUrl:).

I can’t find anything related to this, hope to get some support with it.
Thank you!

Issue with POST API: No Response When Sending JSON Payload

Hello Stack Overflow community,

I’m encountering an issue with my POST API. When I send an empty body to the API, it reaches the server and I get an error response. However, when I send a JSON payload, the request doesn’t seem to reach the server, and Postman just keeps showing that it’s sending, but no response is received.

Here are the details of the issue:

Endpoint: [Your API endpoint]
HTTP Method: POST
Behavior when sending an empty body:
The request reaches the server.
The server returns an error response as expected.
Behavior when sending a JSON payload:
The request does not appear to reach the server.
Postman shows that the request is sending indefinitely.
No response is received.

I’m facing this issue so i need any solution.

mongoose.connect not a function type error

I am running a database connection to mongoDB using mongoose(v 8.6.2) in next.js and it keeps throwing an error of .connect not being a function, this is my database.js file

import mongoose from 'mongoose';


let isConnected = false; // track the connection

export const connectToDB = async () => {
  

  if(isConnected) {
    console.log('MongoDB is already connected');
    return;
  }

  try {
    await mongoose.connect(process.env.MONGODB_URI, {
      dbName: "share_prompt",
      useNewUrlParser: true,
      useUnifiedTopology: true,
      strictQuery: true
    })

    isConnected = true;

    console.log('MongoDB connected')
  } catch (error) {
    console.log(error);
  }
}

I’ve tried checking mongoose documentation to see if there’s any new syntax for .connect, but I’ve gotten nothing

Cancel Backend Processing in Node.js When Client-Side Aborts Request (MERN Stack)

Overview
I am working on a MERN stack application, and I need help handling request cancellations in my Node.js backend, particularly when a client-side request is aborted.

Details
In my application, users can trigger long-running processes in the backend, such as fetching large datasets from a MongoDB database using Mongoose or processing data in chunks. However, if the user navigates away from the page or aborts the request (e.g., by refreshing or closing the browser tab), the backend still continues processing the request. This leads to unnecessary resource usage, such as CPU time, memory, and database connections.

Expectations
I would like to handle the situation where the client-side request is aborted (for instance, through AbortController in the frontend), and stop the corresponding processing on the Node.js backend immediately. I’m looking for a global solution that can handle this across all my Express.js controllers and cancel ongoing operations (e.g., database queries or data processing) efficiently

What I’ve Tried:

  1. Listening for the close event on the req object: I know that Express emits a close event when the connection is aborted, so I tried listening for this event and aborting operations manually. However, it’s not clear how to handle this properly when using Mongoose queries or other async operations.

  2. Mongoose Cursors: I attempted to use Mongoose cursors, as they allow fetching data in chunks and seem to support cancellation. But I’m not sure if this is the best approach, especially for all types of long-running operations.

Stop server side execution until user input and post back that value in server code in C# ASP.Net

I have button called Done with Onclickevent Done().

protected void Done(object sender, EventArgs e)
{ 
  
    if(c.Section.Elements.Any(element.SectionName == "area1"))
    {
      ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "showAreaPopup();", true);
      return; //show popup and stop execution until user input is given for area1
    } 
    if(c.Section.Elements.Any(element.SectionName == "area2"))
    {
      ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", "showAreaPopup();", true);
      return; //show popup and stop execution until user input is given for area2
    }
    int MyArea1 = 0;
    if (int.TryParse(hiddenArea.Value, out Myarea1) && Myarea1> 0)
    {
        c.Details.Add(new Detail() { Name = "area1", Value = MyArea1});
    }

    int MyArea2 = 0;
    if (int.TryParse(hiddenArea.Value, out MyArea2) && MyArea2 > 0)
    {
        c.Details.Add(new Detail() { Name = "area2", Value = MyArea2});
    }
    webservice.Complete(this.CaseId); //this is a web service
  
}
function captureAreaVal() {
            var areaVal = document.getElementById('<%=TxtboxArea.ClientID%>').value;
            if (areaVal && !isNaN(areaVal) && parseInt(areaVal) > 0) {
                document.getElementById('<%=hiddenArea.ClientID %>').value = areaVal;
                closeAreaPopup();
                console.log("in captureAreaVal() ", areaVal);
            }
}

I want to write code such that when sectionName checked is area1/area2 or both, show popup immediately and wait until user input and capture that input in ‘hiddenArea’ and assign it to my Class(with object c) property – Details and then execute the webservice for adding data to database. If none is checked just execute webservice.
Can you please guide on how to postback the area value entered by user in server code. Is my requirement possible, if yes could you please help give/correct my code. Your prompt help is highly appreciated.

Thank you!

I have put flags to achieve my requirement but not helpful. Please help give/correct my code for achieving my requirement.

link controller mathod “undefined” chart js

I’m having trouble with Chart.js where clicking on a chart segment always redirects to an undefined value. I have a Doughnut chart and want each segment to redirect to a specific URL based on the segment clicked. However, the redirection always leads to undefined.

Here’s the relevant part of my code:

Blade Template (Laravel):

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var ctx = document.getElementById('teknisiChart').getContext('2d');

            var chartData = {
                labels: ['4 Tahun', '2-3 Tahun', '1 Tahun', 'Under 1 Tahun'],
                datasets: [{
                    data: [
                        {{ $countMoreThan4Years }},
                        {{ $countBetween2and3Years }},
                        {{ $count1YearAgo }},
                        {{ $countLessThan1Year }}
                    ],
                    backgroundColor: [
                        'rgba(255, 68, 68, 0.8)',
                        'rgba(255, 209, 91, 0.8)',
                        'rgba(223, 250, 125, 0.8)',
                        'rgba(114, 247, 137, 0.8)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 3
                }]
            };

            var teknisiChart = new Chart(ctx, {
                type: 'doughnut',
                data: chartData,
                options: {
                    onClick: function(evt, item) {
                        if (item.length > 0) {
                            var index = item[0].index;
                            console.log('Index:', index);
                            var category = ['more-than-4-years', '2-3-years', '1-year', 'under-1-year'][
                                index
                            ];
                            console.log('Category:', category);
                            window.location.href = `{{ url('/hardware') }}/${category}`;
                        }
                    },
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(tooltipItem) {
                                    return chartData.labels[tooltipItem.dataIndex] + ': ' + tooltipItem
                                        .formattedValue;
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>

Controller Method (Laravel):

<?php

namespace AppHttpControllers;

use CarbonCarbon;
use IlluminateHttpRequest;
use AppModelsItMasterHardware;

class HardwareController extends Controller
{
    public function show($ageCategory)
    {
        dd($ageCategory); // Debugging line
        $dateNow = Carbon::now();

        switch ($ageCategory) {
            case 'more-than-4-years':
                $dateLimit = $dateNow->copy()->subYears(4);
                $hardware = ItMasterHardware::where('tgl_beli', '<=', $dateLimit)->get();
                break;

            case '2-3-years':
                $dateLimitStart = $dateNow->copy()->subYears(3);
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case '1-year':
                $dateLimitStart = $dateNow->copy()->subYear();
                $dateLimitEnd = $dateNow->copy()->subYears(2);
                $hardware = ItMasterHardware::whereBetween('tgl_beli', [$dateLimitStart, $dateLimitEnd])->get();
                break;

            case 'under-1-year':
                $dateLimit = $dateNow->copy()->subYear();
                $hardware = ItMasterHardware::where('tgl_beli', '>=', $dateLimit)->get();
                break;

            default:
                abort(404);
        }

        return view('hardware.index', compact('hardware'));
    }
}

When I click on a segment in the Doughnut chart, it redirects to a URL with undefined as part of the path. I am trying to use the segment index to determine which URL to redirect to, but the resulting URL is not correct.

What I’ve Tried:
Debugging with console.log to check the index and category values.
Ensuring that the @json directive is correctly passing PHP variables to JavaScript.
Checking for JavaScript errors in the console.

How to correctly pass the segment index from Chart.js to construct a URL.
Any issues with the provided code that might be causing undefined values.

How to Merge Headers in tanstack/react-table

I’m working with @tanstack/react-table in a React app and trying to merge headers for a specific column like the example in the screenshot I posted. I want to merge the ones I circled green.

Here’s a screenshot of my current table where I want to merge the headers:
enter image description here

And here is my component table header:

   <thead className="bg-[#F7F7F8]">
      {table.getHeaderGroups().map((headerGroup) => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map((header) => (
            <th
              key={header.id}
              colSpan={header.colSpan}
              className={`border border-[#F1F1F3] p-2 text-base font-semibold text-[#171719] ${header.colSpan > 1 ? 'text-center' : 'text-center'}`}
              style={{ width: header.column.columnDef.size ? `${header.getSize()}px` : 'auto' }}
            >
              {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
            </th>
          ))}
        </tr>
      ))}
    </thead>

And here is my current column configuration:

import { createColumnHelper } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';

type Data = {
  검수: string;
  시도명: string;
  시군구명: string;
  읍면동명: string;
  합계: { 계: number; 남: number; 여: number };
  '10대': { 계: number; 남: number; 여: number };
  // Add dummy data for other groups
};

const columnHelper = createColumnHelper<Data>();

const columns: ColumnDef<Data, any>[] = [
  columnHelper.accessor('검수', {
    header: '검수',
    size: 50,
  }),
  columnHelper.accessor('시도명', {
    header: '시도명',
    size: 100,
  }),
  columnHelper.accessor('시군구명', {
    header: '시군구명',
    size: 100,
  }),
  columnHelper.accessor('읍면동명', {
    header: '읍면동명',
    size: 100,
  }),
  columnHelper.group({
    header: '합계',
    columns: [
      columnHelper.accessor('합계.계', {
        header: '계',
        size: 100,
      }),
      columnHelper.accessor('합계.남', {
        header: '남',
        size: 100,
      }),
      columnHelper.accessor('합계.여', {
        header: '여',
        size: 100,
      }),
    ],
  }),
  // Repeat for group
];

Is there a way to validate and allow only https url’s using .isUri i.e. without using Regex in JavaScript?

Is there a way to validate “https” url’s using .isUri in javascript (it should return true only for https url’s)? (any other method should be fine except regex)

https://test.com //true
test.com // false
http://test.com // false
http://test // false

code snippet (below works great but it returns true for http url’s, instead it should return false for http url’s): –

const validateUrl = (url) => {
  return !!validUrl.isUri(url);
};

Thanks